React: Redux

1. Basic introduction

• This article introduces the use of Redux based on the React Zero base pit.
• If you are not familiar with React, you can learn the basics of React first.
• React

Use Redux

• Install dependencies

CNPM i-s redux react-redux redux-thunk // redux-thunk => action Asynchronous processingCopy the code

• Basic module introduction, as shown in the picture, create a store folder under SRC, createstate.actions.reducers.actionTypes.index
  

  

State ==> Initialize state data actions ==> Redux specifies that state data must be modified through the action Reducers corresponding to Dispatch ==> Describe how the application updates state(it can be understood that action triggers the modification method of state, reducers is the specific content of the modification method) actionTypes ==> Action type, here new actionTypes file, This is to facilitate unified management of the created store by exporting index ===>Copy the code

• state.jsInitializes state data

export default {
  userReducer: {
    login: false.test: 'test'
  },
  orderReducer: {
    orderType: 'order',
    completed: 'false',
    num: 0
  }
}
Copy the code

• actions.js, modify the state method

import { USER_LOGIN, ADD_ORDER_NUM } from './actionTypes'
export function userLogin(payload) {
  return {
    type: USER_LOGIN,
    payload
  }
}
export function addOrderNum() {
  return {
    type: ADD_ORDER_NUM
  }
}
Copy the code

• actionTypes.jsTo centrally manage the types of actions

export const USER_LOGIN = 'USER_LOGIN'
export const ADD_ORDER_NUM = 'ADD_ORDER_NUM'
Copy the code

• reducers.js, update the state description

import { combineReducers } from 'redux'
import { USER_LOGIN, ADD_ORDER_NUM } from './actionTypes'

let userReducer = (state = false, action) => {
  switch (action.type) {
    case USER_LOGIN:
      return {
        ...state,
        login: action.payload
      }
    default:
      return state
  }
}

let orderReducer = (state = {}, action) => {
  switch (action.type) {
    case ADD_ORDER_NUM:
      return {
        ...state,
        num: ++state.num
      }
    default:
      return state
  }
}

exportDefault combineReducers({// combineReducers, merge multiple reducers userReducer, orderReducer,})Copy the code

• index.js, exposing the store

import { createStore, applyMiddleware } from 'redux'
import reducers from './reducers'
import initialState  from './state'
import thunk from "redux-thunk"// Thunk middleware, enhanced asynchronous action const enhancer = applyMiddleware(thunk) // Redux needs applyMiddleware to use middlewareexportDefault createStore(// createStore, createStore instance reducers, initialState, enhancer)Copy the code

3. Use in components

• Modify the index.js entry file, as shown in the figure, and the red line is the part that needs to be modified.ProviderIs a high-priced component through which to putstoreShare to child components. The main principle is to usereactthecontextShare data with child components.
  

  

• Used in a specific component

import React, { Component } from 'react';
import PropsTypes from 'prop-types'// PropsTypes defines the data type, CNPM i-s prop-types import {connect} from'react-redux'Import {addOrderNum} from; import {addOrderNum} from'@/store/actions'OrderNum extends Component {static PropsTypes = {// defines the type of props, isRequired to indicate that the parameter isRequired as orderType: PropsTypes.string, num: PropsTypes.number.isRequired, completed: PropsTypes.bool, addOrderNum: PropsTypes.func.isRequired }render() {
    return (
      <div className="order_component"> <p>orderType: {this.props.orderType}</p> <p>orderNum: {this.props.num}</p> <p>completed: {this.props.completed}</p> <button onClick={this.props.addOrderNum}>add order number</button> </div> ); }} const mapStateToProps = (state, ownProps) => ({// mapStateToProps => ( state.orderReducer.orderType, completed: state.orderReducer.completed, num: State.orderreducer. Num}) const mapDispatchToProps = {// mapDispatchToProps, associate component events with actionsexportDefault connect(mapStateToProps, mapDispatchToProps)(OrderNum) // Connect accepts mapStateToProps, mapDispatchToPropsCopy the code

4, summarize

• This article mainly introduces the use of React – Redux
• The layout is exactly what you want, but you don’t have to
• If there is something wrong, please point it out.