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;