react-redux-基本用法

使用 redux 目的

在 react 中组件与组件之间的通信很麻烦，于是借用 redux 进行第三方的通信，通过把数据存储在 store 里，实现各个组件间快速通信

redux 基础

1. 核心

• state：普通对象
• action：JS 普通对象，用来描述发生了什么，store 数据的唯一来源
• reducer：把 action 和 state 串起来。接收 state 和 action 作为参数，并返回新的 state 的函数。

2. 三大原则

• 单一数据源：只存在唯一一个 store
• state 只读：唯一改变 state 的方法就是触发 action
• 使用纯函数进行修改：reducer

3. 主要组件

• action

  通过 dispatch 传递数据到 store

• reducer

  描述如何响应 action 更新 state

• store

  维持应用的 state；
  提供 getState() 方法获取 state；
  提供 dispatch(action) 方法更新 state；
  通过 subscribe(listener) 注册监听器;
  通过 subscribe(listener) 返回的函数注销监听器。

安装 redux

npm install redux --S

准备工作

1. 创建 store

// store/index.js

import {createStore} from 'redux';
import reducer from './reducer';
const store = createStore(reducer,);
export default store;

2. 创建 reducer

// store/reducer.js

// 初始 state
const initState={
    inputValue:'',
    list:[]};
// reducer 可以接收 state，但是绝不能修改 state，返回的是新的 state
export default (state = initState,action)=>{return state;}

流程

1. store 的 dispatch(action) 传递 action 给 store，store 会自动转发给 reducer

InputChange = (e) => {
    // 告诉 store, 输入的类型和输入框中的值
    const action = {
        // type 属性 必须有
        type:'change_input_value',
        value: e.target.value,
    };
    // 把 action 传给 store
    store.dispatch(action);
    // store 自动传给 reducer
};

2. reducer 接收信息，并返回给 store 一个 newState

export default (state = initState,action)=>{if (action.type==='change_input_value'){const newState = JSON.parse(JSON.stringify(state)); // 简单的深拷贝
        newState.inputValue = action.value;
        return newState;
    }   
}

3. TodoList 监听 state 的变化

constructor(props){super(props);
    this.state = store.getState();
    // 监听 store 里面的变化，只要 store 里面的数据发生改变，则立即执行 subscribe 函数里的函数
    store.subscribe(this.handleStoreChange)
}

StoreChange=()=>{this.setState(store.getState());
    // 感知 store 发生变化之后，从 store 里获取最新的数据，然后进行设置
};