博客

redux使用场景：

• 用户的使用方式复杂
• 不同身份的用户有不同的使用方式（比如普通用户和管理员）
• 多个用户之间可以协作
• 与服务器大量交互，或者使用了WebSocket
• View要从多个来源获取数据
• 多交互、多数据源

redux设计思想：

视图与状态是一一对应的。所有的状态，保存在一个对象里面。

基本概念和API：

store

//store就是保存数据的地方，相当于一个容器，整个应用应该只能有一个store
//store是一个对象或者数组，内部有几个方法
//redux提供createStore这个函数创建store
createStore(reducer, [preloadedState], [enhancer])

reducer()，enhancer()

reducer (Function): 接收两个参数，分别是当前的 state 树和要处理的 action，返回新的 state 树。
[preloadedState] (any): 初始时的 state。 在同构应用中，你可以决定是否把服务端传来的 state 水合（hydrate）后传给它，或者从之前保存的用户会话中恢复一个传给它。如果你使用 combineReducers 创建 reducer，它必须是一个普通对象，与传入的 keys 保持同样的结构。否则，你可以自由传入任何 reducer 可理解的内容。
enhancer (Function): Store enhancer，可选使用。可以用第三方第能力如中间价、时间旅行、持久化来增强 store。是一个组合 store creator 的高阶函数，返回一个新的强化过的 store creator。Redux 中唯一内置的 store enhander 是 applyMiddleware()。
import { createStore } from 'redux';
const store = createStore(fn);

getState()，dispatch()，subscribe()

getState();
返回当前时刻的state，一个state对应一个view。
dispatch(action)：
分发action， 触发state变化的唯一途径。使用当前的`getState()`的结果和传入的action以同步的方式调用store的reducer函数。它的返回值会被作为下一个state。 参数：action描述应用变化的普通对象。
subscribe(listener):
变化监听器。每当dispatch action的时候就会执行，state中的部分可能已经发生变化。可以在listener中调用`getState()`来拿到当前state。

state

State: store对象包含所有数据。如果要获得某个时点点数据，就要对Store生成快照。这种时点的数据集合就叫做State。
import { createStore } from 'redux';
const store = createStore(fn);
const state = store.getState()
State的变化，会导致view的变化，用户只能接触view，接触不到State，用户通过action来改变state，这是改变state的唯一途径。

Action

Action
import { createStore } from 'redux';
const store = createStore(fn);
const action = {
  type: 'addCount',
  payload: '10'
}
store.dispatch(action);
Action Creator
定义一个函数来生成Action，这个函数就叫Action Creator。返回值是一个action对象。

Reducer

store收到Action以后，必须给出一个新的State，这样view才会发生改变。
Readucer是一个函数，它接受Action和当前State作为参数，返回一个新的State。
import { createStore } from 'redux';
const reducer = function (preState, action){
  const {type, payload} = action
  //switch
  //...
  return newState
}
const store = createStore(reducer);
`createStore()`接受reducer作为参数，生成一个新的Store。以后每当`store.dispatch(action)`发送过来一个新的action，就会自动调用Reducer，得到新的State。

Redux工作流程 （数据流向）

用户发出Action
store.dispatch(action);
Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State
let nextState = todoApp(previousState, action);
State一旦有变化，Store就会调用监听函数。
// 设置监听函数
store.subscribe(listener);
`listener`可以通过`store.getState()`得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。
function listerner() {
  let newState = store.getState();
  component.setState(newState);   
}

Store的简单实现

const createStore = (reducer) => {
  let state;
  let listeners = [];
  const getState = () => state;
  const dispatch = (action) => {
    state = reducer(state, action)
    listeners.forEach((listener) => {
      listener()
    })
  }
  const subscribe = (listener) => {
    listeners.push(listener);
    return () => {
      listeners = listeners.filter(l => l !== listener)
    }
  }
  dispatch();
  return {getState, dispatch, subscribe}
}

具体使用可以参考上一篇


redux使用