React-Redux简单示例

一、前言

  Redux三大原则: 1)单一数据源 2)State是只读的 3)使用纯函数来执行修改及其涉及的Action、Reducer、Store等相关概念本文不再赘述，其相关概念可以查阅Redux中文官方文档。本文主要介绍使用React-Redux完成简易计数器功能。

Redux中文文档

二、整体架构

  Redux分为展示型组件和容器型组件，前者从this.props获取数据渲染界面，该组件的state是只读的；后者通过react-redux自带的connect方法关联对应的展现型组件实现数据（state状态）的管理（基于分发Action实现管理）。Reducer负责根据Action的类型来修改state的值，可以通过redux自带的combineReducers函数合并多个Reducer。
  redux自带的createStore函数通过关联合并的Reducer得到store，react-redux自带的Provider组件通过关联store使得Reducer可以访问并修改state值。

1. Redux 入门教程（三）：React-Redux 的用法
2. 《深入React技术栈，陈屹著》

三、简易计数器实现

  展示型组件显示简易计数器界面，从this.props获取数据并渲染界面。其核心代码如下所示：

import React from 'react';
import { Component } from 'react';
import PropTypes from 'prop-types';
class Counter extends Component {
    
    constructor(props) {
        super(props);
    }

    render() {
        //从this.props获取count计数值和counterAdd 方法
        const { count, counterAdd } = this.props;
        return (
            

                计数器加一
                

                    
计数器值: {count}
                
            
        )
    }
    //指定count为number类型，counterAdd为函数类型
    static propTypes = {
        count: PropTypes.number.isRequired,
        counterAdd: PropTypes.func.isRequired,
    }
}

export default Counter

  指定计数器增加Action，其核心代码如下所示：

const counterAddAction = {
    type: 'counter_add'
}
export default counterAddAction

  容器型组件负责传递this.props值给对应的展示型组件，其核心代码如下所示：

import React from 'react';
import { connect } from 'react-redux'
import Counter from '../components/Counter'
import CounterAddAction from "../redux/actions/CounterAddAction ";
//建立一个从（外部的）state对象到（展示型组件的）props对象的映射关系
//counter与展示型组件同名
const mapStateToProps = state => {
    return {
        count: state.counter.count
    }
}
//建立展现型组件的参数到store.dispatch方法的映射
//传递this.props方法，执行counterAddAction（计数器增加Action）对应的函数
const mapDispatchToProps = dispatch => {
    return {
        counterAdd: () => {
            dispatch(CounterAddAction )
        }
    }
}
//connect方法关联展示型组件
const CounterApp= connect(
    mapStateToProps,
    mapDispatchToProps
)(Counter)

export default CounterApp;

  计数器关联的reducer负责响应Action修改state值，其核心代码如下所示：

export default function counterReducer(state = initialState, action) {
    switch (action.type) {
        case 'counter_add': return Object.assign({}, state, {
            count: state.count + 1  //计数器加一
        });
        default: return state;
    }
}

const initialState = {
    count: 0,  //count初始值
}

  合并多个Reducer的核心代码如下所示：

import { combineReducers } from 'redux'
import CounterReducer from './CounterReducer'

const Reducers= combineReducers({
    CounterReducer, 
})
export default Reducers

  最后在index.js中使用Provider组件关联合并的Reducer，其核心代码如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import CounterApp from './container/CounterApp'
import Reducers from './redux/Reducers'
// 通过createStore方法生成store
const store = createStore(Reducers)
ReactDOM.render(
     //关联store
        
    , document.getElementById('root')
);

  最后启动项目，结果如下所示：

计数器+1结果

参考链接：一个简单的react-redux小demo

四、相关依赖

  项目所需的依赖包括redux、react-redux、prop-types，使用npm下载相关依赖即可。

npm install redux --save
npm install react-redux --save
npm install prop-types --save