1 、安装
npm install --save redux
2、在src目录下新建index.js和reducer.js
index.js中
import { createStore } from 'redux' // 引入createStore方法
import reducer from './reducer'
const store = createStore(reducer) // 创建数据存储仓库
export default store //暴露出去
reducer.js中定义数据
const defaultState = {
inputValue : 'Write Something',
list:[
'早上4点起床,锻炼身体',
'中午下班游泳一小时'
]
}
export default (state = defaultState,action)=>{
return state
}
3、组件中使用
import store from './store/index' //引入
//构造函数中获取数据
constructor(props){
super(props)
this.state=store.getState();
}
//js中使用
{{this.state.inputValue}}
3、store值的修改(input框触发方法)
onChange={this.changeInputValue}
方法内获取到输入的值,定义action,并通过dispatch()
方法传递给store
changeInputValue(e){
const action ={
type:'changeInput',//这个值自定义
value:e.target.value
}
store.dispatch(action)
}
在reducer.js文件中,更改值
export default (state = defaultState,action)=>{
if(action.type === 'changeInput'){
let newState = JSON.parse(JSON.stringify(state)) //深度拷贝state
newState.inputValue = action.value
return newState
}
return state
}
回到组件,在构造函数中订阅
constructor(props){
super(props)
this.storeChange = this.storeChange.bind(this) //转变this指向
store.subscribe(this.storeChange) //订阅Redux的状态
}
在storeChange方法中重新获取store的数据
storeChange(){
this.setState(store.getState())
}