1.安装redux
yarn add redux
2.创建store文件夹,创建store.js
//引入createStore 模块 import {createStore} from 'redux' //调用createStore 方法 const store = createStore(); //导出store export default store;
3.创建reducer.js
//定义数据 const defaultState = { inputValue:"", list:[1,3,2] } // 导出一个方法,这个方法有state和action参数,返回state export default (state = defaultState,action)=>{ return state; }
4.在store.js中引入reducer,并在createStore方法里传入reducer
//引入reduce.js import reducer from './reducer' //在createStore方法传入reducer const store = createStore(reducer);
5.在App.js中,引入store,使用store.getState()方法,获取state
import React, { Component } from 'react';
import store from './store/store'
class App extends Component {
constructor(props) {
super(props);
this.state = store.getState();
}
render() {
return (
<div>
<input value={this.state.inputValue}/>
<ul>
{
this.state.list.map((ele,index)=>{
return (
<li key={index}>
{ele}
</li>
)
})
}
</ul>
</div>
);
}
}
export default App;