React学习之求和案例_react-redux

实际项目中，需要权衡是直接使用Redux还是用React-Redux。
React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）

UI组件

• 只负责 UI 的呈现，不带有任何业务逻辑

• 没有状态（即不使用this.state这个变量）

• 所有数据都由参数（this.props）提供

• 不使用任何 Redux 的 API

容器组件

• 负责管理数据和业务逻辑，不负责 UI 的呈现
• 带有内部状态
• 使用 Redux 的 API UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

如果一个组件既有 UI 又有业务逻辑，那怎么办？回答是，将它拆分成下面的结构：外面是一个容器组件，里面包了一个UI 组件。前者负责与外部的通信，将数据传给后者，由后者渲染出视图。

React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。

connect()

import { connect } from 'react-redux'

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Count)

connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。

containers/Count.jsx

import React, { Component } from 'react'
//引入action
import {
	createIncrementAction
} from '../../redux/count_action'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
//定义UI组件
class Count extends Component {
	//加法
	increment = ()=>{
		const {value} = this.selectNumber
		this.props.increment (value*1)
	}
	return (
			<div>
				<h1>当前求和为：{this.props.count}</h1>
				<button onClick={this.increment}>+</button>
			</div>
		)
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
//(state)=>{return count:state} 简化
	state => ({count:state}),
	//mapDispatchToProps的一般写法
	/* dispatch => ({
		increment:number => dispatch(createIncrementAction(number)),
	*/

	//mapDispatchToProps的简写（内部自动调用dispatch）
	{
		increment :createIncrementAction
		// export const createDecrementAction = data => ({type:DECREMENT,data})
	}
)(Count)

mapStateToProps()是一个函数，connect函数的第一个参数，它接受state作为参数，返回一个对象。这个对象有一个count属性，代表 UI 组件的同名参数。

mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。

是函数则会得到dispatch和ownProps（容器组件的props对象）两个参数。

<Provider> 组件
无需自己给容器组件传递store，给包裹一个即可

index.js

import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp);

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

./components/App

export default class App extends Component {
	render() {
		return (
		{/* <div>
				<Count  store={store}/>
				<XXX store={store}/>
				<XXX store={store}/>
				<XXX store={store}/>
			</div>
		==============更改为*/}
			<div>
				<Count/>
			</div>
		)
	}
}

实现多组件数据共享

1.新增Person组件
containers
— Person,jsx
— Count,jsx
2.Person的reducer和Count的Reducer要使用combineReducers进行合并，合并后的总状态是一个对象

redux/store.js

//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware,combineReducers} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './reducers/count'
//引入为Count组件服务的reducer
import personReducer from './reducers/person'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'

//汇总所有的reducer变为一个总的reducer
const allReducer = combineReducers({
	count:countReducer,
	persons:personReducer
})

//暴露store
export default createStore(allReducer,applyMiddleware(thunk))

若组件过多，可单独建个文件夹汇总所有render
reducers
— person.jsx
— count.jsx
— index.jsx

reducers/index.jsx

/* 
	该文件用于汇总所有的reducer为一个总的reducer
*/
//引入combineReducers，用于汇总多个reducer
import {combineReducers} from 'redux'
//引入为Count组件服务的reducer
import count from './count'
//引入为Person组件服务的reducer
import persons from './person'

//汇总所有的reducer变为一个总的reducer
export default  combineReducers({
	count,
	persons
})

/store.js

//引入汇总之后的reducer
import reducer from './reducers'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
//引入redux-devtools-extension
import {composeWithDevTools} from 'redux-devtools-extension'

//暴露store 
export default createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))

注意：交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。

export default connect(
	state => ({
		count:state.count,
		personNum:state.persons.length
	}),
	{}
)(Count)