redux结合react-redux的使用

使用create-react-app生成一个react项目然后再安装redux和react-redux

npm install redux --save
npm install react-redux --save

在src目录最外层的index.js文件中引入redux，store，provider

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from "./store/reducer"
import ReactDOM from 'react-dom';
import './index.css';
import Demo from './demo/myPage'
let store = createStore(reducer);
ReactDOM.render(
  <Provider store={store}>
    <Demo />
  </Provider>
    ,
  document.getElementById('root')
);

Provider:作为提供者把store的内容放在全局，任何一个子页面都可以访问store里面的方法和定义的变量
在src下面新建一个store文件夹目录如下：

image.png

actions:文件主要是一系列方法，例：

import * as actions from './actionTypes';
export function addList(payload){
    return {
        type:actions.UPDATE_LIST,
        payload
    }
}

定义的type统一放在actionType文件中，便于管理

export const UPDATE_INPUT = "updateInput";
export const UPDATE_LIST = "updatelist";
export const DELETE_ITEM = "deleteItem";

state的初始值单独放在initialValue文件中,定义初始值的时候可以使用immutable中的Record，这样就不需要深拷贝state然后再赋值给state里面得变量,npm install immutable --save,安装immutable；

import {Record} from 'immutable';
export default Record(
    {
        list:[],
        inputValue:"hello Redux"
    }
)  

Record的特性（从别人的博客上复制过来的）

Record跟Immuable的Map很像，但是它有以下独特的特点，使它具有特殊性：

1.一旦构造好，就不能添加更多的属性（key）。
2.可以给Recor的实例定义默认值。
3.Record实例的属性可以像普通JS对象那样访问，也可以将它删除。
4.可以对Record进行命名，以便更好地进行debug和错误处理。
5.可以对Record进行扩展（extend），以从Record中提供派生数据。

在src下面的demo文件夹中myPage文件实践使用，这里需要用connect将当前页面的内容和state的方法变量进行一个连接之后才可以使用

//引入需要用到的方法和变量
import { connect } from 'react-redux';
import * as funcs from '../store/actions'
关于bindActionCreators，详情请见https://redux.js.org/api/bindactioncreators
import { bindActionCreators } from 'redux';
import { Map } from 'immutable';
//中间代码省略
export default connect()(MyPage)
const allAction = [funcs];

此时只是用connect连接了UI组件，如果需要有交互和展示state变量的值，还需要再定义两个方法：
connect方法接受两个参数：mapStateToProps和mapDispatchToProps。前者负责输入逻辑，将state映射到 UI 组件的props中，后者负责逻辑的处理，即将用户对 UI 组件的操作映射成 Action。

//将变量映射到组件的props中
function mapStateToProps(state){
    return {
        inputValue : state.inputValue,
        list:state.list
    }
}
//将方法映射到props中
function mapToDispatch(dispatch){
    const creators = Map().merge(...allAction).
    filter(value=>typeof value === 'function').
    toObject();
    return {
        actions:bindActionCreators(creators,dispatch),
        dispatch
    }
}
//直接获取（该段代码应该在render中定义）
const { list,inputValue,action:{ handleChange } } = this.props;

这样就可以在组件中访问变量list和inputValue，可以通过dispatch对inputValue和list进行增删改的操作;
我把代码上传到github上：https://github.com/zihan520/reduxDemo/tree/master/reduxDemo
感兴趣的小伙伴可以看一看。
（本文只是个人对react-redux的理解，如果有不正确的地方可以帮忙指出来，谢谢！）