Redux-CSDN博客

本文链接：https://blog.csdn.net/NumbSilver/article/details/117454006

本文介绍了Redux的使用场景，如组件状态共享、改变全局或其他组件状态等。阐述了其工作流程，包括容器组件发出Action，经Action Creators分发到Store，Store调用Reducer返回新State。还介绍了Redux的主要组件，如state、reducers、action等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Redux

什么情况下使用redux

某个组件的状态，需要共享
某个状态需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态

工作流程

在这里插入图片描述

容器组件(用户)发出Action。
容器组件：容器组件中要引入action，就是要引入需要操作的动作
action_creators：(做什么，然后将需要做的事分发给STORE)
Action Creators 把动作分发给Store
Store：负责中转，redux的主要组件
Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action
Reducer 会返回新的 State
State 一旦有变化，Store 就会调用监听函数。
action_type(防止写错)

主要组件

state：Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。当前时刻的 State，可以通过store.getState()拿到。
reducers：包含state初始状态和操作state的方法。Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。
Redux 规定，一个 State 对应一个 View。只要 State 相同，View 就相同。
action：State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。
action creator：View 要发送多少种消息，就会有多少种 Action。定义一个函数来生成 Action，这个函数就叫 Action Creator。store.dispatch()是 View 发出 Action 的唯一方法。

export const createXXXXXAction = ()=>{
    // localstorge的操作也可以写在这
    return {
	    type:SAVE_USER_INFO,
	    data:value
    }
}

store
Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。
Redux 提供createStore这个函数，用来生成 Store。

//最核心的管理者
//从redux中引入createStore，用于创建最核心的store对象
import {createStore,applyMiddleware} from 'redux' 
//引入reducer
import reducers from './reducers'
//引入redux-thunk
import thunk from 'redux-thunk'
//引入redux-devtools-extension，用于支持redux开发者调试工具的运行
import { composeWithDevTools } from 'redux-devtools-extension'

export default createStore(reducers,composeWithDevTools(applyMiddleware(thunk)))