redux作为一个单独的库，他可以搭配，Angular，vue，react以及jQuery使用，今天我们再项目中搭配react-redux来使用：
Redux的核心概念其实很简单：将需要修改的state都存入到store里，发起一个action用来描述发生了什么，用reducers描述action如何改变state tree 。创建store的时候需要传入reducer，真正能改变store中数据的是store.dispatch API。
一、安装
npm i redux react-redux --save
二、使用
我们为了让所有容器组件访问store我们要使用react-redux提供的Provider 组件来包裹APP组件。当然如果要结合react-router使用的话还要包裹BrowserRouter或其他。
你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。
换言之，中间件都是对store.dispatch()的增强
index.js
import { Provider } from 'react-redux' // 传递store利用Provider 包裹器
import { createStore, applyMiddleware, compose } from 'redux'
import reducer from './store' // reducer代码
import thunk from "redux-thunk"; // 异步操作
import logger from 'redux-logger' // 日志
const store = createStore(
reducer,
compose(
applyMiddleware(thunk), // 中间件，进行异步操作
applyMiddleware(logger) // state变化打印log日志，类似vuex的createLogger()
)
)
store.subscribe(() => {}); // 监听state数据变化
ReactDOM.render(
<Provider store={store}>
<HashRouter>
<App>
...
接下来我们新建一个store文件夹，用来管理reducer以及action
reducer ⇒ goods.js: 添加商品功能
let data = {
list:[],
status:false,
}
export default function (state = data, action) {
switch (action.type) {
case 'fixList':
!state.list.includes(action.data) ? state.list.push(action.data) : console.log('已存在该商品')
// let list = state.list
// !list.includes(action.data) ? list.push(action.data) : console.log('已存在该商品')
// return Object.assign({},state,{list:[...list]})
default:
return state
}
}
reducer ==> index.js我们统一管理reducer，利用redux提供的combineReducers对拆分的多个reducer进行了合并
import { combineReducers } from "redux";
import goods from './reducer/goods'
export default combineReducers({
goods
})
这里要注意：
reducer的处理函数中传入了state和action，不要直接去改变state的值
接下来，我们利用react-redux 提供的 connect 方法将 store与组件连接：
import React, {Component} from 'react'
import { connect } from 'react-redux' // 引入处理函数
class Classify extends Component {
constructor(props) {
super(props)
}
// 添加随机商品
addGood = () => {
let list = ['肥皂','沐浴露','牙膏','洗牙粉','洗手液','洗面奶','爽肤水','润肤露','润发素','睫毛膏','口红']
this.props.dispatch({
type:'fixList',
data:list[parseInt(Math.random()*list.length)],
})
}
render() {
return (
<div>
<div onClick={() => this.addGood()}>
添加随机商品
</div>
<br/> <br/>
{
this.props.goodsList.map((item,index) => (
<div key={index}>{item}</div>
))
}
</div>
)
}
}
function mapStateToProps(state) {
return {
goodsList:state.goods.list
}
}
export default connect(mapStateToProps)(Classify );
mapStateToProps(state)：将store的state和我们的props关联。
mapDispatchToProps(dispatch):把dispatch和props关联。
暴露关联组件：
export default connect()(Classify );
这样基本利用react-redux 实现状态管理：props增加store
利用中间件 redux-logger 打印log日志：
但是这里发现一一个问题：
当我add商品，state的数据发生变化，页面并未渲染！！！
这个问题后面文章解决：
react-redux 中state数据发生变化，页面并没有渲染
三、链接
redux API：http://cn.redux.js.org/faq/