React-Redux 知识梳理

React-Redux 知识梳理

Redux API

• createStore
• Store
• combineReducers
• applyMiddleware
• bindActionCreator
• compose

react-redux API

• <Provide store>
• connect(mapStateToProps, mapDispatchToProps, mergeProps)

一个简单的redux应用流程

在最外层嵌套一个Provide,它用来提供整个组件的store 就像

<Provide store={store}>

接着我们需要一个store来管理我们整个APP的状态，一般情况下我们一个应用只会有一个store

import { createStore } from 'redux'
const store = createStore(reducer[, initialState] [, enhancer])

在这里的第一个reducer参数为了管理状态方便，我们会用combineReducer合并所有的reducer然后分割state

import { createStore, combineReducers } from 'redux'

const reducer_01 = (state, action) = {
    //一些逻辑
}
const reducer_02 = (state, action) => {
    //一些逻辑
}
const reducers = combineReducer({
    state_01: reducer_01,
    state_02: reducer_02
})
const store = createStore(reducers)

//这样通过store.getState()得到的state会形如
{
    state_01: {},
    state_02: {}
}

在createStore的时候我们一般会利用各种中间件来达到一些我们平常的store不能达到的事情，比如说在action函数中返回一个promise，可以用thunk或者其他类似的包来达到我们想要达到的事情，自己写一个简单的middleware可以像下面这样

const middleware = ({dispatch, getState}) => next => action => {
    console.log(getState())
    return next(action)
}

第一层的提供函数dispatch getState
第二层提供next函数，将执行传递到下一个中间件
第三层会提供一个action，这个action可能是从上一个中间件传递过来的，所以中间件的调用是有顺序的

到了这里一个store算是创建好了，接下来就是组件怎么去用这个store里面的数据的东西了

react-redux提供了connect函数用来连接store和component

import { connect } from 'react-redux'
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'

class HelloWorld extends Component {

    constructor() {
        super();
        this.state = {
            name: ''
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            name: nextProps.name
        })        
    }

    render() {

        const {  change } = this.props.actions;

        return (
            <div>
                <h2>Hello { this.state.name } !</h2>
                <input type='text' ref={input => this.input = input}/>
                <button onClick={() => change(this.input.value)}>click me</button>
            </div>
        )
    }
}

/* action */
const actionCreator = {
    change: name => {
        return {
            type: 'CHANGE_NAME',
            name
        }
    }
}

const mapStateToProps = state => {
    return {
        name: state.change.name
    }
}

const mapDispatchToProps = dispatch => {
    return {
        actions: bindActionCreators(actionCreator, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(HelloWorld)

这里面有两个函数 mapStateToProps 和 mapDispatchToProps。功能就和他们的名字一样，把state和dispatch传递到props里面。在我这里面的mapDispatchToProps用了redux的bindActionCreators API，这个API的主要功能是可以自动为action函数自动绑定dispatch函数，我们可以使用action函数名就可以代替dispatch(actionsname)

/* reducer */
import { combineReducers } from 'redux';

const change = (state = {}, action) => {
    switch (action.type) {
        case 'CHANGE_NAME':
            return {
                name: action.name
            }
        default: 
            return state;
    }
}
export default combineReducers({
    change
})

差不多到这里react的组件和redux的store就已经连接起来可以互动了。

关于createStore的middleware部分，下次有时间再写了，这里面用了三个部分的东西

• React框架
• Redux状态管理
• react-redux

最后推荐一个很棒的教程链接吧，学习 react redux 分开学习，然后在连贯起来学习，这样会事半功倍，其实本来redux也可以用于其他地方的

redux-tutorial-cn