A story,

Redux is a state container for javascript applications that provides predictable state management. 2, install NPM install redux --save The reducer in the Store initializes state and defines state modification rules. 3.3 Submit data changes by dispatching an action. 3.4 Submit actions to the Reducer function. Return the new state to create store SRC /store/ reduxstore.js based on the type of the action passed inCopy the code
    import {createStore} from 'redux'
    
    const countReducer = (state=0,action)=>{
    	switch(action.type){
        	case:'ADD':
              return state + 1
            case:'MINUS':
              return state - 1
            default:
            return state
        }
    }
    
    const store = createStore()
    
    export default store
Copy the code
Create ReduxPageCopy the code
import React, {component} from 'react' import store from '.. /store/ReduxStore' export default class Reduxpage extends Component {ComponentDidMount(){ store.subscribe(()=>{ this.forceUpdate() }) } add = ()=>{ store.dispatch({type: 'ADD'}) } minus = ()=>{ store.dispatch({type: 'MINUS'}) } render() { <div> <p>{store.getState()}</p> <button onClick={this.add}>ADD</button> <button onClick={this.minus}>ADD</button> </div> } }Copy the code

Second, the react – story

Install NPM install react-redux –save

React-redux provides two apis. 2.1 Provider provides store for descendant components. 2.2 Connect Provides data and change methods for components

      import React from 'react'
      import ReactDom from 'react-dom'
      import App from './App'
      import store from './store/'
      import {Provider} from 'react-redux'
      
      ReactDom.render(
      	<Provider store= {store}>
        	<App/>
        </Provider>,
        document.querySelector('#root')
      )
Copy the code

Get status data, reactreduxPage.js

import React, {component} from 'react' import {connect} from 'react-redux' class ReactReduxPage extends Component { render() { const {  num, add, minus } = this.props; return ( <div> <h1>ReactReduxPage</h1> <p>{num}</p> <button onClick={add}>add</button> <button onClick={minus}>minus</button> </div> ); } } const mapStateToProps = state =>{ return { num: state } } const mapDispatchToProps = { add:()=>{ return {type:'add'} }, minus:()=>{ return {type:'minus'} } } export default connect( mapStateToProps, // Dispatchtoprops // dispatchtoprops)(ReactReduxPage)Copy the code