了解下 Redux 概念
Jun 24, 2021
Redux 用来进行复杂的状态管理，Redux 的思想继承自 Flux，并进行了更加简洁的抽象。
- store
store.dispatch(action)是 View 发出 Action 的唯一方法，接受一个 Action 对象作为参数，将它发送出去。- store 允许使用
store.subscribe()方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。subscribe 也返回一个函数，调用这个函数就可以解除监听。
- action
- 改变 state 的唯一办法，就是使用 action，它会运送数据到 Store。
- action creator：view 要发送多少种消息，就会有多少种 action，action 有固定的格式。如果都手写，会很麻烦。可以定义一个函数来生成 action，这个函数就叫 action creator。
- state
Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State，可以通过store.getState()拿到。
- reducer
- store 收到 action 以后，必须给出一个新的 state，这样 View 才会发生变化。这种 state 的计算过程就叫做 reducer。
- reducer 是一个纯函数1，它接受 action 和当前 state 作为参数，返回一个新的 state。
reducer #
const reducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT': return state + 1;
case 'DECREMENT': return state - 1;
default: return state;
}
};
reducer 是一个纯函数，你可以把所有子 Reducer 放在一个文件里面，然后统一引入。
import { combineReducers } from 'redux'
import * as reducers from './reducers'
const reducer = combineReducers(reducers)
// 或者
const chatReducer = combineReducers({
chatLog,
statusMessage,
userName
})
store #
import {createStore} from "redux";
import {combineReducers} from "redux";
import {siderReducer} from "./sider";
export const reducer = combineReducers({
siderReducer,
})
export const store = createStore(reducers)
store.subscribe(listener) #
Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。
import { createStore } from 'redux';
const store = createStore(reducer);
store.subscribe(listener);
store.createStore(reducer) #
创建 store
import {useReducer} from "react";
const reducer = combineReducers(reducers)
const store = store.createStore(reducer)
store.getState() #
获取 state
const state = store.getState();
action #
const ADD_TODO = '添加 TODO';
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
const action = addTodo('Learn Redux');
上面代码中，addTodo函数就是一个 Action Creator。
state #
const state = store.getState()
// 或者通过 hook
const [state, dispatch] = useReducer(reducer, initialArg, init);
react-redux #
- UI组件
- 容器组件
connect() #
用于从 UI 组件生成容器组件。
mapStateToProps() #
建立一个从（外部的）state 对象到（UI 组件的）props 对象的映射关系。
mapDispatchToProps() #
用来建立 UI 组件的参数到 store.dispatch 方法的映射。
Provider 组件 #
React-Redux 提供 Provider 组件，可以让容器组件拿到state。
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp);
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
参考 #
-
纯函数：同样的输入，必定得到同样的输出。 ↩︎