Redux quick start

Here is just the simplest way to use

Prerequisite knowledge

1. store： There is only one application store,redux Provide createStore Method to create store
2. state： yes store Data in , Is read-only , Can pass ：store.getState() obtain , The modification method is trigger action
3. action： Used to tell redux You need to change state,action The resulting object must contain type attribute , indicate action name
4. dispatch： Is used to action Pass to reducer, yes view communicate store The only way ！ Generally in view On the call dispacth, Pass a ation In the past
5. reducer： receive action and state, According to action Handle state, And return to a new state, It has to be a pure function （ As long as it's the same input , Must get the same output ）
6. subscribe： For monitoring state And execute the callback function .store.subscribe(callback) Method returns a function , Call this function to disable listening , Just put View The update function of （ about React project , It's the component render Method or setState Method ） Put in listen, It will come true View Automatic rendering of .

Practice process

Generally speaking , If it's a synchronization request ：

1. Definition action

function addAge(id) {
    
  return {
    
    type: 'ADD_AGE',
    id
  }
}

2. Definition reducer

const defaultState = {
    name:"",age:0,id:""};
const reducer = (state = defaultState, action) => {
    
  switch (action.type) {
    
    case 'ADD_AGE':
      //  Omit processing logic 
      return {
    ...state,age:state.age+1};
    default: 
      return state;
  }
};

3. establish store

import {
     createStore } from 'redux';
const store = createStore(reducer);

4. Page call

export default function App() {
    
  const [state, setState] = useState({
    });

  useEffect(() => {
    
    return Store.subscribe(() => {
    
      setState(Store.getState()); //  When subscribing , Registered a callback function , Every time the status is updated , This function will be called automatically 
    });
  }, []);

  function click() {
    
    Store.dispatch(addAge("123"));
  }
  return(<>{
    state}</>)
}

---

stay In the asynchronous case , Middleware is required , because ：dispatch One action after , arrive reducer Before , Do some extra work , It needs to be used middleware. You can use Redux middleware To log 、 Create crash report 、 Call asynchronous interface or route, etc .

1. Introduce middleware redux-thunk

import {
     applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
//  The middleware can make the original dispatch The received object becomes a function 
//  If it is an object, it will be normally received and sent to reducer, If it is a function, execute the function 
const store = createStore(
    reducers, 
    applyMiddleware(thunk)
);

2. Write services.js, Definition API structure , Such as

export function getInfo(name){
    
  return Axios.get('/test?name='+name);
}

3. Define an asynchronous action, Returns a function , Participation is dispatch

const GET_INFO = ' pick up information ';
const getInfo = async name => dispatch =>{
    
  //  Logical ellipsis 
  getInfo(name).then(res=>dispatch({
    
    type: 'GET_INFO ',
    info:res
  })
}

Everything else is the same

react-redux

Only in view The layers are different ： Two new functions are added , Meaning is literally

• mapStateToProps
• mapDispatchToProps
  Add a higher-order function ：connect(mapStateToProps,mapDispatchToProps), Returns a function , Pass the component into the returned function to get the wrapped component ！
  Usage method ：

import React from "react";
import {
     connect } from "react-redux";
import {
     Action01, Action02 } from "../../actions/Demo01";
function Demo_01(props) {
    
  return (
    <div>
      demo_01
      <div></div>
      <button onClick={
    () => props.action01("bt1")}>action01</button>
      <button onClick={
    () => props.action02("bt2")}>action02</button>
      <p>{
    props.msg}</p>
      <p>{
    props.value}</p>
    </div>
  );
}

export default connect(
  function mapStateToProps(state) {
    
    return {
    
      msg: state.Demo01.msg,
      value: state.Demo01.value
    };
  },
  function mapDispatchToProps(dispatch) {
    
    return {
    
      action01: (msg) => dispatch(Action01(msg)),
      action02: (value) => dispatch(Action02(value))
    };
  }
)(Demo_01);

Merge multiple reducer And provide the initial state of the application

Use combineReducers Middleware to merge multiple reducer, Used to divide States

import {
     createStore, combineReducers, applyMiddleware } from "redux";
import ReduxThunk from "redux-thunk";
import Demo01Reducer from "../reducers/Demo01";
import Demo02Reducer from "../reducers/Demo02";
import Demo01State from "../state/Demo01";
import Demo02State from "../state/Demo02";
const allReducers = combineReducers({
    
  Demo01: Demo01Reducer
  Demo02: Demo02Reducer
});
export default createStore(
  allReducers,
  {
    
    Demo01: Demo01State,
    Demo02: Demo02State
  },
  applyMiddleware(ReduxThunk)
);