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;