(一) 安装

cnpm install redux --save



在react中还需要安装 react-redux, ( redux-devtools ) 如下：


cnpm install react-redux --save
cnpm install redux-devtools --save-dev

(二) 基础

(1) Action

Actions 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。用法是通过 store.dispatch() 把 action 传到 store。

• Action 本质上是 JavaScript 普通对象。
• 它是 store 数据的唯一来源。
• 一般来说你会通过 store.dispatch() 将 action 传到 store。
• 我们约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。除了 type 字段外，action 对象的结构完全由你自己决定。多数情况下，type 会被定义成字符串常量。当应用规模越来越大时，建议使用单独的模块或文件来存放 action。

(2) Action 创建函数

Action 创建函数 就是生成 action 的方法。

• 在 Redux 中的 action 创建函数只是简单的返回一个 action，这样做将使 action 创建函数更容易被移植和测试。

export function changeUserName(userName) {  // action创建函数
    return {                             // 返回一个action
        type: 'CHANGE_USERNAME',
        payload: userName,
    };
}

(3) Reducer

Action 只是描述了有事情发生了这一事实，并没有指明应用如何更新 state。而这正是 reducer 要做的事情。( reducer是用来定义规则的 )

• reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。
• 因为reducer是纯函数，所以永远不要在 reducer 里做这些操作：
  修改传入参数；
执行有副作用的操作，如 API 请求和路由跳转；
调用非纯函数，如 Date.now() 或 Math.random()。
( 需要谨记 reducer 一定要保持纯净。只要传入参数相同，返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用，没有 API 请求、没有变量修改，单纯执行计算。)
• 不要修改 state。 使用 Object.assign() 新建了一个副本。或者使用 { ...state, ...newState } 达到相同的目的。
  不能这样使用 Object.assign(state, { visibilityFilter: action.filter })，因为它会改变第一个参数的值。你必须把第一个参数设置为空对象。
• 在 default 情况下返回旧的 state。遇到未知的 action 时，一定要返回旧的 state。

(4) Store

Store 就是把action和reducer联系到一起的对象。一个应用只有一个单一的store。 当需要拆分处理数据逻辑时，我们应该使用 reducer 组合 而不是创建多个 store。

• 一个应用只有一个store
• Store 有以下职责：
  维持应用的 state；
  提供 getState() 方法获取 state；
  提供 dispatch(action) 方法更新 state；
  通过 subscribe(listener) 注册监听器;
  通过 subscribe(listener) 返回的函数注销监听器。

(5) createStore

createStore 通过传入 我们的 reducer 形成一个全局唯一的 store, 这个形成的 store 是一个对象

import { createStore } from 'redux';
const store = createStore(reducer)          // 参数是总的 reducer

(6) combineReducers()

combicombineReducers 辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用 createStore()函数了。

• state 对象的结构由传入的多个 reducer 的 key 决定。( 重要 )

import {combineReducers} from 'redux'


const todoApp = combineReducers({
    visibilityFilter,    // 所有的reducer都写在这里，这里是visibilityFilter：visibilityFilter的缩写
    todos
});

(三) react-redux

React-Redux是官方提供的一个库，用来结合redux和react的模块React-Redux提供了两个接口Provider、connect。

(1) Provider

Provider是一个React组件，它的作用是保存store给子组件中的connect使用

入口文件中


<Provider store={this.props.store}>       // provider是提供者的意思
  <h1>Hello World!</h1>
</Provider>

(2) connect

connect 会把State和dispatch转换成props传递给子组件。

container.js中



import * as actionCreators from './actionCreators'
import { bindActionCreators } from 'redux'

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) }
}

export default connect(mapStateToProps, mapDispatchToProps)(Component)

(3) mapStateToProps

• mapStateToProps需要负责的事情就是 返回需要传递给子组件的State，返回需要传递给子组件的State，返回需要传递给子组件的State，（重要的事情说三遍。。。。）然后connect会拿到返回的数据写入到react组件中，然后组件中就可以通过props读取数据啦~~~~
• mapStateToProps 是一个普通的函数。
• 当它被connect调用的时候会为它传递一个参数State。

function mapStateToProps(state) {                     // 参数是state
  return { list: state.list }
}

(4) mapDispatchToProps

• 通过mapDispatchToProps这个方法，把actionCreator变成方法赋值到props，每当调用这个方法，就会更新State。。。。
• mapDispatchToProps也是一个普通的函数。

function mapDispatchToProps(dispatch) {    // 参数是dispatch
    return  bindActionCreators(userNameAction, dispatch);   // 参数是action和dispatch
}

(5) bindActionCreators

bindActionCreators 的作用就是将 Actions 和 dispatch 组合起来生成 mapDispatchToProps 需要生成的内容。

let actions = {
  addItem: (text) => {
    type: types.ADD_ITEM,
    text
  }
}

bindActionCreators(actions, dispatch);      // 两个参数，一个是actions，一个是dispatch
// @return {addItem: (text) => dispatch({ type: types.ADD_ITEM, text })}

• 可以看到，bindActionCreators 执行这个方法之后，它把 actionCreators 的每一项的 key 不变，value 变成 dispatch(actionCreator(...args)) 这玩意，这表示， actionCreator 已经变成了一个可执行的方法，执行这个方法，就会执行 dispatch 更新数据。。

http://blog.csdn.net/zouyee/article/details/52929941
https://www.w3ctech.com/topic/1561
https://www.imooc.com/article/14958

实例：

(基本流程：action创建函数获得数据传入action对象，reducer函数根据action对象中的数据进行规则计算后，返回新的数据到store数据库，store数据库通过mapStateToProps和mapDispatchToProps传给ui组件)

1.在入口文件中，用 Provider ( react-redux提供 ) 包裹总视图组件

import React from 'react';
import ReactDOM from 'react-dom';


import CommentApp from './commentApp';   // CommentApp组件

import ReduxTestContainer from './component/reduxTest/container';

import {Provider} from 'react-redux';

import storeA from './store/store';
const stores = storeA();

ReactDOM.render(
  (

          <CommentApp>    
              <Provider store={stores}>      //引入Provider，store函数
                  <ReduxTestContainer />            
              </Provider>
          </CommentApp>  

  ),document.getElementById('root'))

2.在第一步 (上一步) 中引入的store.js

import {createStore, combineReducers} from 'redux'
import reduxTestReducer from '../component/reduxTest/reducer';


export default function configStore(initialState) {
    const store = createStore(combineReducers({reduxTestReducer}), initialState,
    window.devToolsExtension ? window.devToolsExtension() : undefined);

    return store;
}





说明如下：
---------------

createStore(reducer)    // creactStore()函数的参数是reducer (根据规则生成store)
combineReducers({reducer1,reducer1})    // combineReducers拼接各个reducer，汇总到一起
window.devToolsExtension ? window.devToolsExtension() : undefined);    // 插件

3.reducer 规则，是一个纯函数，参数是state和action

import  {actionTypes} from './constant';

const initialState = {
    userName: {}
}
export default function reduxTestReducer(state = initialState, action) {
    switch(action.type) {
        case actionTypes.GET_USER_NAME:
            return { 
                ...state,                   // 展开state，复制对象，不改变原state。
                userName: action.payload    // payload是装载的意思，获取中属性
            }
        default:
            return state;
    }
}

4.action创建函数（ 里面有action,里面的action是一个对象，一定包含字符串式的type属性 ）

import {actionTypes} from './constant';    //定义的常量，在action和reducer中都要用


export function getUserName(userName) {
    return {
        type: actionTypes.GET_USER_NAME,
        payload: {'userName':userName}
    }
}




说明：

1 userName参数是在容器组件或者傻瓜组件中调用getUserName函数时，传入的参数。

2 action中的数据，是store中数据的唯一来源。

5.container容器组件 ( connect函数有mapStateToProps，mapDispatchToProps两个函数 )

import React, {Component} from 'react';
import {connect} from 'react-redux';
import { bindActionCreators } from 'redux';
import * as reduxTestActionTotal from './action';
import ReduxTest from './reduxTest';

class RreduxTextContainer extends Component {
    componentDidMount() {
        this.props.getUserName('北京')
        // console.log(this.props.userName.userName,'2222222222222222222222222222222222222222222')
    }
    render() {
        return (
            <div>
                <ReduxTest {...this.props}></ReduxTest>
            </div>
        )
    }
}
function mapStateToProps(state) {
    return {
        userName:state.reduxTestReducer.userName
    }
}

function mapDispatchToProps(dispatch) {
    return  bindActionCreators(reduxTestActionTotal, dispatch);
}

export default connect(mapStateToProps,mapDispatchToProps)(RreduxTextContainer)

6.ui展示组件

import React, {Component} from 'react';



export default class RreduxTextComponen extends Component {
    changeAddress = () => {
        this.props.getUserName('重庆')
    }
    render() {
        return (
            <div style={{background:'#8470FF',padding:'10px',height:'300px'}}>

                <div style={{marginTop:'10px',textAlign:'center',color:'white'}}>{this.props.userName.userName}</div>
                <div 
                    style={{marginTop:'10px',textAlign:'center',color:'white'}}
                    onClick={this.changeAddress}
                    >
                点击更换
                </div>
            </div>
        )
    }
}

效果图

效果图2

2017-12-06 更新

(三) redux 中的api接口

(1) combineReducers

随着应用变得复杂，需要对 reducer 函数 进行拆分，拆分后的每一块独立负责管理 state 的一部分。

combineReducers 辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用 createStore。

• state 对象的结构由传入的多个 reducer 的 key 决定。( 重要 )
• 合并后的 reducer 可以调用各个子 reducer，并把它们的结果合并成一个 state 对象。

(2) applyMiddleware

applyMiddleware(...middlewares)

Middleware 可以让你包装 store 的 dispatch 方法来达到你想要的目的。同时， middleware 还拥有“可组合”这一关键特性。多个 middleware 可以被组合到一起使用，形成 middleware 链。其中，每个 middleware 都不需要关心链中它前后的 middleware 的任何信息。

• redux-thunk 支持 dispatch function，以此让 action creator 控制反转。被 dispatch 的 function 会接收 dispatch 作为参数，并且可以异步调用它。这类的 function 就称为 thunk。

(3) redux-thunk 中间件-------------------------

redux-thunk 支持 dispatch function，以此让 action creator 控制反转。被 dispatch 的 function 会接收 dispatch 作为参数，并且可以异步调用它。

redux-thunk中间件可以让action创建函数先不返回一个action对象，而是返回一个函数，函数传递两个参数(dispatch,getState),在函数体内进行业务逻辑的封装

• 安装

cnpm install redux-thunk --save

• 使用

import {createStore, combineReducers, applyMiddleware} from 'redux';       // 引入applyMiddleware
import usernameReducer from '../component/username/reducer';

import thunkMiddleware from 'redux-thunk';                                // 引入redux-thunk中间件

export default function configStore() {
    const store = createStore(
        combineReducers({usernameReducer}),
        window.devToolsExtension ? window.devToolsExtension() : undefined,
        applyMiddleware(thunkMiddleware)                                 // 使用redux-thunk中间件
    )
    return store;
} 

• 使用了redux-thunk后，Action创建函数就可以dispatch一个function了，而且可以异步调用，如下：

ation.js



export function getImages() {                            // Action创建函数
    return dispatch => {                                 // return一个函数(以dispatch为参数)
        const p = fetch('http://gank.io/api/data/福利/6/1').then(result => result.json());
        p.then(result => {
            dispatch({                                   // dispatch一个action
                type: actionTypes.GET_IMAGES,
                payLoad: result
            })
        })
        return p
    }    
}




------------------------------------------------------------------------------------
reducer.js



import {actionTypes} from './constant';

const initialState = {
    userName: {},
    images:{}
}

export default function(state=initialState,action) {
    switch(action.type) {
        case actionTypes.GET_USER_NAME:
            return {
                ...state,
                userName: action.payLoad
            }
        case actionTypes.GET_IMAGES:                            // 对应的reducer代码
            return {
                ...state,
                images: action.payLoad
            }
        default:
            return state;    
    }
}

redux-devtools截图