react和redux的连接

React-Redux 知识梳理

Redux API

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

react-redux API

  • connect(mapStateToProps, mapDispatchToProps, mergeProps)

一个简单的redux应用流程

在最外层嵌套一个Provide,它用来提供整个组件的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函数用来连接storecomponent

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 (
            

Hello { this.state.name } !

this.input = input}/>
) } } /* 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)

这里面有两个函数 mapStateToPropsmapDispatchToProps。功能就和他们的名字一样,把statedispatch传递到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

你可能感兴趣的:(react和redux的连接)