React.js学习笔记(11) Redux + React-redux

(一) 安装


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截图

最后编辑于：2017.12.20 12:51:15

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,524评论 5赞 460
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,869评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,813评论 0赞 320
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,210评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,085评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,117评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,533评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,219评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,487评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,582评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,362评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,218评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,589评论 3赞 299
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,899评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,176评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,503评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,707评论 2赞 335