React.js framework Redux basic case detailed explanation

react.js framework Redux

https://github.com/reactjs/redux

Install:

npm install redux react-redux
#Based on react, we have already installed it before

Redux reference documentation:
http://redux.js.org/

Redux Core Concept: Store

We can simply understand it as being used to store State of each component or the independent state you define yourself, and to perform unified operations such as reading, updating, and monitoring the state.
http://redux.js.org/docs/basics/Store.html

Reduce

The official tells us that the basic use of redux is as follows:

import {createStore} from "redux";
import todoApp from "./reducers";
let store = createStore(todoApp);

The parameter passed into createStore() is a function Function.
The concept in redux is called: Reduce
The basic form of Reduce is:

function myFun(state,action){
  // ...
}

Of course, we can also use the arrow function form of esmascript 2015 to define it.

Practical Exercise

1. Let's define a Reduce first

InfoReduce.js:

//Test data let info = {
    title:"Test title",
    clicknum:0
};

// Export the data through the parameter hull default (state = info, action)=>{


    return state; //The returned value is the test data}

2. Reduce is ready, let's start using Redux

import InfoReduce from "./../redux/InfoReduce";

import {createStore} from "redux";
let store = createStore(InfoReduce);

3. The very important concept store in Redux has been created. Let’s see how to use it in the component?

// Define a component called InfoDetail class InfoDetail extends React.Component{
    //Constructor(props) {
        super(props);
        // Initial state this.state = {
            infoData:store.getState() //Get data through the store object method};
      }


        render(){
            return <div>
                <h2>News title: {this.state.infoData.title}</h2>
                <span>Number of clicks: {this.state.infoData.clicknum}</span>
                <p><button>Modify click volume</button></p>
            </div>
        }
}

Get data through store.getState() .

At this point we basically understand: Reducers is a specified function that generates a new state and passes it to the Store; our components obtain the state through the Store to update the component data.

Understanding actions

The official documentation on action :
http://redux.js.org/docs/basics/Actions.html

In fact, through the word action we can guess that it is an operation used to handle business.

Where is action in our previous code?
When we define the Reducer function, the second parameter is:

export default (state, action)=>{}

1. Since action is an operation, it means that we need it in the event handling function on the component

<button onClick={this.addClick.bind(this)}>Modify click amount</button>

Bind a click event function addClick to the button

2. Let’s take a look at what’s going on in the addClick function.

        addClick(){
            //Modify state
            store.dispatch({
                type:"INFO_CLICK"
            })

            this.setState({ //Update state
                infoData:store.getState()
            })
        }

this.setState() We have learned before that this is used to update the state;
store.dispatch() is something in our Redux. This method actually dispatches action .
Distinguish by type.

3. According to our needs, the business logic that our action needs to handle is to increase clicknum

//Test data let info = {
    title:"Test title",
    clicknum:0
};

// Export the data through the parameter hull default (state = info, action)=>{

    if (action.type == "INFO_CLICK"){
        let oldNum = state.clicknum;
        oldNum++;

        // Return new data return Object.assign({},state,{clicknum:oldNum});
    }

    return state; //The returned value is the test data}

In our Reducer function, we use action.type to judge and then handle business logic.

At this point, we may be confused, why is Redux still troublesome? Yes, it is generally used in projects with complex business logic.

This is the end of this article about the detailed explanation of the basic case of Redux in the react.js framework. For more relevant basic content of Redux in the react.js framework, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!