了解下 Redux 概念

了解下 Redux 概念

Jun 24, 2021
前端, React

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')
)

参考 #

Redux 入门教程(一):基本用法

Redux 入门教程(二):中间件与异步操作

Redux 入门教程(三):React-Redux 的用法


  1. 纯函数:同样的输入,必定得到同样的输出。 ↩︎

本文以 CC 署名-非商业性使用-禁止演绎 4.0 国际 协议进行许可。

上一篇:浏览器中的 HTTP 缓存使用策略

下一篇:跨域相关问题