redux获取store中的数据

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;