redux of acquiring data store

1. Install redux

yarn add redux

 

2. Create store folder, create store.js

 // introduced createstore module 
Import createstore {} from 'Redux' // call the method createstore 
const = Store createstore ();
 // derived Store 
Export default Store;

 

3. Create reducer.js

// definition data 
const defaultState = { 
    for inputValue: "" , 
    List: [ 1,3,2 ] 
} 

// deriving a method, this method has the action parameter and state returns state 
Export default (= defaultState state, action) => {
     return State; 
}

 

4. store.js introduced in the reducer, and the reducer passing method in createStore

// introduced reduce.js 
Import from the reducer './reducer' // in createstore method of passing the reducer 
const = createstore Store (the reducer);

 

5. In App.js, the introduction Store, use store.getState () method, obtaining 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;