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;