Redux
Redux是js状态容器,提供可预测化的状态管理
Redux的安装
npm install --save redux
在src下新建一个store文件夹,里面包含index.js reducer.js 两个文件
在reducer.js文件写入公共数据,创建一个reducer的方法,第一个参数state等于当前的公共数据,第二个参数action是一个容器 ,store根据action携带type在reducer中查询变更具体要执行的方法,执行返回新的state
//公共数据
const renducer=(state={
inputVal:'1111',
list:[1,2]
},action)=>{
const newState={...state}
switch (action.type) {
case input_change :
newState.inputVal=action.value
default:
return newState
}
return state
}
export default renducer
index.js中引入redux的createStore方法来生成store,在引入reducer.js
import renducer from "./reducer";
import {createStore} from 'redux'
const store=createStore(renducer)
export default store
store提供了几个方法供我们使用,下面我们常用的3个
store.dispatch();//改变状态,改变state的唯一方法
store.getState();//获取整个状态树
store.subscribe();//订阅一个函数,每当state改变时,都会去调用这个函数
在项目中引入store中的index.js
调用dispatch,通过action把变更的信息传递给reducer
代码如下:
import React, { Component } from 'react'
import store from './store'
export default class Demo01 extends Component {
constructor(props){
super(props)
console.log(store);
//赋值
this.state=store.getState()
}
componentDidMount(){
//当state改变时,调用这个函数
store.subscribe(this.handleChangeState)
}
//定义一个函数
handleChangeState=()=>{
//修改值
this.setState(store.getState())
}
changeInputVal=(e)=>{
let action={
type:'input_change',
value:e.target.value
}
//调用dispatch,把action变更的信息传递给reducer
store.dispatch(action)
}
render() {
return (
<div>
<input value={this.state.inputVal} onChange={this.changeInputVal}/>
</div>
)
}
}