Redux深入浅出

Redux

快速开始

npm install --save redux

import { createStore } from 'redux';

let Store = createStore(reducer, preloadedState, enhancer);

export default Store

使用场景

一些变量需要在全局创建，并可以在项目任何地方使用它；那就用redux吧。redux提供了一套针对全局状态（state）管理的解决方案。

基本概念

Store

整个应用只能有一个 Store。Store可以作为调用redux api 的实例化对象.

State

Store 对象中所有数据存储在这里。

Action

Action 只一个对象。但必须有type属性（类似于key，供给dispatch调用）。 改变 State 的唯一办法就是dispatch(Action)

Reducer

Reducer 是一个纯函数函数¹，它接受 Action 和当前 State 作为参数，返回一个新的 State。

enhancer

enhancer 一个高阶函数²，接受一个函数 形参和createStore相同，在函数内部可修改或新增store中的方法或属性。

核心api

• redux.createStore(fn) //获取store
• store.getState() //获取state
• store.dispatch(Action) //更改state，改变 state 的惟一方法是 dispatch action
• store.subscribe(fn) //监听state变化

创建一个redux

/**
 * @param {Function} reducer  // 接收两个参数，分别是当前的 state 和要处理的 action，返回新的 state 。
 * @param {any} preloadedState //state初始值的状态。注意，如果提供了这个参数，它会覆盖 Reducer 函数的默认初始值
 * @param {Function} enhancer //一个高阶函数 用于给store增加一些自定义方法和属性，也可改写原store方法
 */
const preloadedState= {num:100}
import { createStore } from 'redux';
let Store = createStore(reducer, [preloadedState], enhancer);

定义reducer

// state 相当于 vuex中的state对象 形参数默认值为state初始值
function reducer(state = {}, action) {
    switch (action.type) {
        case 'INCREMENT': //类似于vuex中的 action 方法名
            state.num+=1
            return state; //类似于vuex中的 mutations 执行代码块【与vuex不同的是这里没有展示mutations方法名 也不可以单独调用mutations】
        case 'DECREMENT':
            state.num-=1
            return {...state};
        default:
            return state;
    }
}

定义enhancer

const enhancer = createStore => (reducer, preloadedState, enhancer) => {
    let store = createStore(reducer, preloadedState, enhancer)  
    function dispatch(action) {
        console.log(`dispatch an action: ${JSON.stringify(action)}`);
        const res = store.dispatch(action);
        const newState = store.getState();
        console.log(`current state: ${JSON.stringify(newState)}`);
        return res;
    }
    function myFun() {
        const state = store.getState();
        return (state + 'label');
    }
    store.myFun = myFun
    return { ...store, dispatch }
}

监听/解除监听 State

// 添加监听 subscribe 返回一个函数用于解除监听
let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);
// 解除监听
unsubscribe();

使用combineReducers对reducer函数进行拆分

通过组合式reducer分讲state拆分，独立管理各自的State

let preloadedState ={}
function todos(state = [], action) {
    switch (action.type) {
        case 'ADD_TODO':
            return state.concat([action.text])
        default:
            return state
    }
}
function counter(state = 0, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1
        case 'DECREMENT':
            return state - 1
        default:
            return state
    }
}
let cReducers = combineReducers({
    todos,
    counter
})
let Store = createStore(cReducers, preloadedState, enhancer);

---

1. 纯函数【概念】：
   1、返回结果只依赖于它的参数。
   2、并且在执行过程里面没有副作用(副作用：简单理解为不改变外部变量，或调用其他非纯函数)。
   注意 reducer 是纯函数。它仅仅用于计算下一个 state。它应该是完全可预测的：多次传入相同的输入必须产生相同的输出。它不应做有副作用的操作，如 API 调用或路由跳转。这些应该在 dispatch action 前发生。

   ↩︎

2. 高阶组件【概念】：
   1、接受一个或多个函数作为参数 如arr.map arr.reduce
   2、或return 返回另外一个函数

   ↩︎