review

  • React (1) Uncover the JSX syntax and virtual DOM
  • React (2) Implement a simple version of HTML +redux.js demo
  • React uses redux to implement a simplified counter in React
  • React redux-Saga (redux-Saga
  • React (5) DVA (Zero Configuration)

Redux: Redux: redux: Redux: Redux: Redux: Redux: Redux

Put together the directory structure first

Let’s take a look at what each file does and implement it one at a time

  • Actions ->counter. Js Holds the actions of counters
  • Reducers ->index.js is the main entry file because there may be several reducers.
  • Reducers ->counter. Js Save the reducer counter
  • Action-types.js stores macros, which, as anyone who plays the game knows, saves action types
  • Store ->index.js is the entry file exposed to the entire store

After reading the last article, you probably don’t know exactly what this directory structure does, but you certainly do understand the concepts in redux, so let’s start with one file at a time

First, write the Store section

1. Write the simplest store/action-types.js file

  • Is a macro file that holds the type of counter action, namely, add and subtract operations. Post code to look more specific
// action-types
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
Copy the code

A macro file is not required, but it has the advantage of being structured so that you can see at a glance the types of all the actions of the counter

2. Write the reducers/counter.js file

  • Reducer is a reducer, there may be many reducer in the reducers directory, we first write one reducer
import * as Types from ".. /action-types"; // Introduce the action typeletInitState = {// declare an initial state number:0};functionCounter (state = initState, action) {// Take state and action and give state an initial value. Switch (action.type) {// Determine the action typecaseTypes.INCREMENT: //actiontype:'INCREMENT'And the count: 5}return {number:state.number+action.count};
        case Types.DECREMENT:
            return {number:state.number-action.count};
    }
    return state    
}
export default counter

Copy the code

It is exactly the same as the reducer we wrote in the previous article, except that we extracted it to make the structure clear

3. Write the reducers/index.js file

  • Since we only have a reducer of counters, the default export is ok. If there are more than one reducer, merge is done in this file, more on this later.
import counter from "./counter"; // Import reducer by defaultexportDefault counter // Export by defaultCopy the code

Reducers /index.js is a reducer file that can be reducers/index.js

4, Write actions/counters

  • Pull the distributed action out for invocation in the coming component
import * as Types from ".. /action-types"; / / into the macroletActions = {add(num){// The add method is called inside the component and returns an action objectreturn {type:Types.INCREMENT,count:num}
    },
    minus(num){
        return {type:Types.DECREMENT,count:num}
    }
};
export default actions
Copy the code

5. Compile store/index.js, the main file of the warehouse

  • This file is mainly used to export the Store for use by components
import {createStore} from 'redux';
import reducer from "./reducers"
letstore = createStore(reducer); / / create a storeexport default store;
Copy the code

By now, the Store file has been completely written. Let’s start writing the component part to make the repository data available to the component

Second, component call part

Write the react main entry file, SRC /index.js

  • Use the React-Redux library to communicate between stores and components
  • React-redux provides two core apis, and Providers provide connect links
  • Provider is a component used in the React entry file to provide a store.
  • Connect means that the React component connects to store and communicates with Redux

I can’t explain it to you, but let’s look at the code and explain it line by line

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from "./components/Counter";
import store from "./store"; // Import {Provider} from the react-redux Provider component"react-redux";

ReactDOM.render(
    <Provider store = {store}>
        <div>
            <Counter />
        </div>
    </Provider>, document.getElementById('root'));

Copy the code

2. Write the Counter component

  • The connect method is used in the component to realize the communication between the component and redux. The CONNECT method accepts 2 parameters. connect(mapStateToProps,actions)(Counter)
  • You can bind the exported object from store/actions.js to the properties of the component. Inside the component, you can get the corresponding actions using this.props
import React from "react";
import store from ".. /store";
import * as Types from ".. /store/action-types"// The method that generates the action object is called actionCreator Import Actions from".. /store/actions/counter";
import {connect} from "react-redux";
class Counter extends React.Component {
    render() {
        console.log(this.props);
        return (
            <div>
             <div>{this.props.number}</div>
                <button onClick={()=>{
                    this.props.add(5)
                }}>+</button>
                <button onClick={()=>{
                    this.props.minus(1)
                }}>-</button>
            </div>
            )
    }
}
letMapStateToProps = (state)=>{//state represents store.getState()return{... state} };export default connect(mapStateToProps,actions)(Counter)   
Copy the code

So far, we basically realize a counter function, first to test, and then comb the whole workflow

Test click add count function

Function basic realization, may not be clear about the whole process how to achieve, the following to sort out the whole workflow

React-redux process analysis

  • When you click the button to trigger this. Props. The add (5), returns to action or {type: Types. The INCREMENT, the count: num}, will be distributed within the connect
  • The action is processed by reducer and the new state is returned
  • A page refresh

Let me just finish with a picture

  • More quality articles for reference
  • Redux all source code parsing stamp here