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也可以用于其他地方的
