react redux 用法示例简记

理解的逻辑不一定对，先按照当前理解记录

示例采用加减按钮

1. 根据要做的内容定ActionType

// ActionTypes.js
export const INCREMENT = 'increment';
export const DECREMENT = 'decrement';

ActionType 对应const类型的列举
例如按钮点击加减数按钮，对应BUTTION_INC 和 BUTTION_DEC

2. 定义Action

import * as ActionTypes from './ActionTypes.js';

export const increment = (counterCaption) => {
  return {
    type: ActionTypes.INCREMENT,
    counterCaption: counterCaption
  };
};

export const decrement = (counterCaption) => {
  return {
    type: ActionTypes.DECREMENT,
    counterCaption: counterCaption
  };
};

实际是根据ActionType定义对应函数,返回js对象，其中type对应ActionType，
其他属性根据实际情况定义，上例是counterCaption(注意，reducer用到的也是此名)

3. 定义reducer

import * as ActionTypes from "./ActionTypes.js";

export default (state, action) => {
  // 注意 这里是从action.js带出的js对象的解构
  const { counterCaption } = action;

  switch (action.type) {
    case ActionTypes.INCREMENT:
      return { ...state, [counterCaption]: state[counterCaption] + 1 };
    case ActionTypes.DECREMENT:
      return { ...state, [counterCaption]: state[counterCaption] - 1 };
    default:
      return state;
  }
};

封装了state和action，使用switch分支处理ActionType对应的操作结果并返回state.

此例是加减按钮，点击按钮后会对组件的属性进行对应加减并显示

4. 定义store

import {createStore} from 'redux';
import reducer from './Reducer.js';

const initValues = {
  'First': 0,
  'Second': 10,
  'Third': 20
};

const store = createStore(reducer, initValues);

export default store;

定义store并绑定了初始数据和reducer

5. 顶层主入口引入Provider和store

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";

import ControlPanel from "./views/ControlPanel";
import store from "./Store.js";

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);

6. 定义组件和子组件
   ControlPanel封装Counter和Summary

ControlPanel定义

import React, { Component } from "react";
import Counter from "./Counter.js";
import Summary from "./Summary.js";

const style = {
  margin: "20px"
};

class ControlPanel extends Component {
  render() {
    return (
      

        
        
        
        

        

      
    );
  }
}

export default ControlPanel;

Counter定义

import React from "react";
import PropTypes from "prop-types"
import { connect } from "react-redux";

import * as Actions from "../Actions.js";

const buttonStyle = {
  margin: "10px"
};

function Counter({ caption, onIncrement, onDecrement, value }) {
  return (
    

      
        +
      
      
        -
      
      
        {caption} count: {value}
      
    
  );
}

// 显示声明Counter用到的参数，类型有误则会警告
Counter.propTypes = {
  caption: PropTypes.string.isRequired,
  onIncrement: PropTypes.func.isRequired,
  onDecrement: PropTypes.func.isRequired,
  value: PropTypes.number.isRequired
};

// 跟summary一样处理显示
function mapStateToProps(state, ownProps) {
  return { value: state[ownProps.caption] };
}

// 定义界面按钮点击操作后的响应，返回js对象包括了
// 加减按钮的响应，实际最终调用的dispatch函数，
// 传入参数是 {
//  type: INC或DEC
//  counterCaption: caption名
// }
function mapDispatchToProps(dispatch, ownProps) {
  return {
    onIncrement: () => {
      dispatch(Actions.increment(ownProps.caption));
    },
    onDecrement: () => {
      dispatch(Actions.decrement(ownProps.caption));
    }
  };
}


export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

Summary定义

import React, { PropTypes } from "react";
import { connect } from "react-redux";

function Summary({ value }) {
  return 
Total Count: {value}
;
}

Summary.PropTypes = {
  value: PropTypes.number.isRequired
};

// 这个函数映射处理显示的内容
function mapStateToProps(state) {
  let sum = 0;
  for (const key in state) {
    if (state.hasOwnProperty(key)) {
      sum += state[key];
    }
  }
  return { value: sum };
}

export default connect(mapStateToProps)(Summary);

注意

在redux中 store上的每个state都只能通过reducer来更改。其中每个模块都可以导出一个自己的reducer。这个导出的reducer只能最多更改redux的状态树上的一个节点下的数据，因为reducer之间对状态树的修改权是互斥的，不可能让两个reducer都修改同一个状态树上的节点.