Redux 入门

Redux 入门

Jun 24, 2021
2021
FE, React

Redux 用来进行复杂的状态管理,Redux 的思想继承自 Flux,并进行了更加简洁的抽象。

  • store
    • store.dispatch()是 View 发出 Action 的唯一方法,接受一个 Action 对象作为参数,将它发送出去。
    • Store 允许使用store.subscribe()方法设置监听函数,一旦 State 发生变化,就自动执行这个函数。subscribe 也返回一个函数,调用这个函数就可以解除监听。
  • action
    • 改变 State 的唯一办法,就是使用 Action。它会运送数据到 Store。
    • action creator
      • View 要发送多少种消息,就会有多少种 Action。如果都手写,会很麻烦。可以定义一个函数来生成 Action,这个函数就叫 Action Creator。
  • state
    • Store对象包含所有数据。如果想得到某个时点的数据,就要对 Store 生成快照。这种时点的数据集合,就叫做 State,可以通过store.getState()拿到。
  • reducer
    • Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
    • Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。
    • 是纯函数

reducer #

import { combineReducers } from 'redux';

const chatReducer = combineReducers({
  chatLog,
  statusMessage,
  userName
})

你可以把所有子 Reducer 放在一个文件里面,然后统一引入。

import { combineReducers } from 'redux'
import * as reducers from './reducers'

const reducer = combineReducers(reducers)

store #

import {createStore} from "redux";
import {combineReducers} from "redux";
import {siderReducer} from "./sider";

export const reducers = combineReducers({
  siderReducer,
})


export const store = createStore(reducers)

store.subscribe() #

Store 允许使用store.subscribe方法设置监听函数,一旦 State 发生变化,就自动执行这个函数。


import { createStore } from 'redux';
const store = createStore(reducer);

store.subscribe(listener);

store.createStore(reducer) #

创建 store

store.getState() #

获取 state

action #

const ADD_TODO = '添加 TODO';

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

const action = addTodo('Learn Redux');

上面代码中,addTodo函数就是一个 Action Creator。

state #

reducer 是一个纯函数。

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

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 的用法

上一篇:MobX 入门 下一篇:Redis 的分布式锁使用注意