React-Redux的用法

UI组件

React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。

1. 只负责 UI 的呈现，不带有任何业务逻辑
2. 没有状态（即不使用this.state这个变量）
3. 所有数据都由参数（this.props）提供
4. 不使用任何 Redux 的 API

容器组件

1. 负责管理数据和业务逻辑，不负责 UI 的呈现
2. 带有内部状态
3. 使用 Redux 的 API

connect()

React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。

connect方法接受两个参数：mapStateToProps 和 mapDispatchToProps。
mapStateToProps负责输入逻辑，将State的值映射到UI组件参数props。
mapDispatchToProps负责输出逻辑，将用户对UI的操作映射到Action。

mapStateToProps

mapStateToProps是一个函数。它返回一个对象，里面的每个键值对应的就是一个映射。

const mapStageToProps = (state， ownProps)=>({
    Cat: state.Cat
})

Cat就是 上篇文章 combineReducers中传入的Cat；
mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行；
mapStateToProps的第一个参数总是state对象，还可以使用第二个参数，代表容器组件的props对象。

mapDispatchToProps

mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。

const mapDispatchToProps = (dispatch)=>({
    add: (value) => dispatch({type: 'ADD', value: value}),
    del: (key) => dispatch({type: 'DEL', key: key})
})

完整代码

// app.js
import { connect } from 'react-redux';

function mapStateToProps(state){
  return {
    Cat: state.Cat
  }
}

function mapDispatchToProps(dispatch){
  return {
    ADD: (value)=> dispatch({type: 'ADD', value: value}),
    DEL: (key)=> dispatch({type: 'DEL', key: key}),
  }
}

class App extends React.Component{
	constructor(){
	    super()
	    this.state = {
	      value: ''
	    }
	}
	render(){
		var {list} = this.props
		return (
			<div>App page</div>
		)
	}
}
const container = connect(mapStageToProps, mapDispatchToProps)(App)

Reducers

UI component 发送对应的 action，触发相应的Reducers

// reducer-list.js
const initStage = {
  data: [
    '测试数据1',
    '测试数据2'
  ]
}

const reducer = (state = initStage, action) => {
  switch(action.type){
  case 'ADD':
    state.data = [...state.data, action.value]
    return Object.assign({}, state)
  case 'DEL':
    state.data.splice(action.key, 1)
    state.data = [...state.data];
    return Object.assign({}, state)
  default:
    return state;
  }
}

export default reducer

< Provider > 组件

React-Redux 提供Provider组件，可以让容器组件拿到state。

import React from 'react';
import { Provider } from 'react-redux';
import ReactDOM from 'react-dom';
import App from './container/connectApp';
import store from './store';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, document.getElementById('root'));

本篇到这里就完结了。