博客

一、前言

学了这些东西后，为了加深理解故作此记录。这些仅仅是初步的概念，更详细的使用和更强大的功能还是需要看官方文档。

二、redux

Redux 是 JavaScript 状态容器，提供可预测化的状态管理

Redux 由 Flux 演变而来，但受 Elm 的启发，避开了 Flux 的复杂性

简单的说，redux把应用的所有状态集中在一起，这样可在应用越来越大、越来越复杂时方便管理。

redux主要包括一下几个方法：

• createStore()      // 创建store
• getState()           // 获取state
• dispatch()          // 分发action
• subscribe()       // 订阅store
• combineReducers //合并多个reducer

需要知道 redux 不能直接更改 state ，而是通过dispatch（分发）action（描述此次改动的细节）来创建一个新的state ，这样有利于跟踪每一次改动。

reducer 就像一个处理器，而action像一个指令

reducer接受 action ，根据action的type来确定需要执行的更新操作。

在发生更新时便会触发所有已经subscribe的函数，通常这些函数用以更新UI 层。

//1.创建reducer
function reducer(preState,action)
{
	switch (action.type) {
		case "increment":
			return {
				counter:preState.counter + 1
			};
		default:
			return preState;
	}
}
//2.创建store
var store = createStore(reducer);
//3.订阅store
store.subscribe(()=>{
	console.log(store.getState());//显示新state
});
//4.分发action
store.dispatch({
	type:"increment"
})

三、react-redux

redux可用于很多种框架而不是只服务于react，它仅包含了核心概念的内容。如果需要更贴合react则需要用react-redux。

注意：开发react应用时redux和react-redux都需要安装。redux负责状态管理、react-redux负责将store注入组件中

//安装
npm i redux -S
npm i react-redux -S

react-redux主要包括一下几个方法：

• Provider 
• connect

Provider 把根组件包裹起来，将store注入整个应用中。这样就不用通过props把store一级一级地往下传。

connect 用以构造 容器组件 。connect可映射state和dispatch到容器组件的props中， 然后便能在UI组件中显示state数据，或者dispatch action

Provider 和 connect 是对应的，Provider提供store、connect则获取store并把数据交给组件。另外，connect后就不需要再写subscribe来操作更新了，容器组件的props会在state更新后改变。

//1.创建reducer
function reducer(preState,action)
{
	switch (action.type) {
		case "increment":
			return {
				counter:preState.counter + 1
			};
		default:
			return preState;
	}
}
//2.创建store
var store = createStore(reducer);
//3.注入store
ReactDOM.render(
	<Provider store= {store} >
		<BrowserRouter>
			<App />	
		</BrowserRouter>
	</Provider>
	, document.getElementById('root'));
//4.connect 容器组件
//counter.js
var counter = (props)=>{
	return (
		<span>{props.counter}</span>
	)
}
// ... 省略部分代码
export default connect(mapStateToProps,mapDispatchToProps)(counter);