Redux的介绍
Redux是集中管理状态（数据）的，通过它可以实现跨组件通信，在任何组价中都可以拿到存储在里面的数据。
Action
Action就是一个对象，它里面有个type属性，值是字符串，它是用来标识我们要执行的操作，除了type外，其他属性由自己定义。
Reducer
Reducer就是一个函数，接受旧的state和action，返回新的state
（oldState，action）=> newState
Store
Store将action，state，reducer联系在一起。
她的作用：
- 维持应用的state
- 提供getState（）方法获取state
- 提供dispatch（action对象）方法更新state
- 通过subscribe（listener）监视state的变化，重新渲染组件
在react项目中使用redux
根据需求分析，我们需要在组件中拿到count，对这个数进行加减操作，那么这个值只有连个变化，加或者减
第一步：action对象确认
export add = ()=>({type:’add’})
export decrease= ()=>({type:’ decrease’}) |
第二步：根据旧的state和action对象进行加工，产生newState
//创建reducer
function count(oldState=0, action){
let {type} = action
据加或者减产生不同的newState
switch(type){
case ‘add’:
newState = oldState+1
return newState
case ‘decrease:
newState = oldState-1
return newState
default:
//初始化count
return oldState
}
}
另一个reducer
function xxx(){
return xxxxx
}
//多个reducer合并
import ｛combineReducers｝from ‘reudx’
export default combineReducers({
Count,
xxx
}) |
第三部：通过store建立联系
//引入createStore，创建Store
import ｛createStore｝ from ‘redux’
//根据reducer，创建store
import reducer from ‘./reducer’
export default createStore(reducer) |
第四步：修改index.js文件
//引入store
emport store from ‘./redux/store.js’
//向App传入store
ReactDom.render(<App store = {store}/>,document.getElemetById(‘root’))
//监视state变化
store.subscribe(() => {
ReactDom.render(<App store={store} />, document.getElementById('root'));
}) |
第五步：在组件中使用
//App.js
//引入action创造函数
import {add decrease } from ‘./redux/action.js’
const ｛store｝= this.props //获得store对象
store.dispatch( add() ) //传入action对象去修改state |
在react项目中使用react-redux
第四步：修改index.js
//引入react-redux
import {Provider} from 'react-redux'
ReactDom.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('root')); |
第五步：组件中使用react-redux
//引入action创造函数
import {add ，decrease } from ‘./redux/action.js’
//引入connect，创建容器组件
import {connect} from ‘react-redux’
class Counter extends Component{
获取state中的数据
this.props.count
//触发reducer
this.props.add()
}
//connect调用
export default connect(
//第一个参数
state => ({ count:state.count, xxxx:state.xxx })
//第二个参数
｛add，decrease｝
)（Counter） |
在react项目中使用redux-thunk实现异步action
第一步：创建异步action
export add = ()=>({type:’add’})
export decrease= ()=>({type:’ decrease’})
//异步action
export addAsync = ()=>{
return (dispatch)=>{
setTimeout(()=>{
dispatch(add())
})
}
} |
第三步：通过store建立联系
//引入createStore，创建Store
import ｛createStore，applyMiddleware｝ from ‘redux’
//根据reducer，创建store
import reducer from ‘./reducer’
//引入redux-thunk，处理异步action
import thunk from ‘redux-from’
export default createStore(reducer, applyMiddleware(thunk)) |
