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