preface

Redux is a data layer framework for managing the common data state of components, including Store,Reducer,React Component, and Actions Creators has four parts

The core is Store, and the relationship between them is very important for Redux writing. From a macro perspective, we can also combine Redux=reducer+Flux, and the code is the best expression and explanation of the text description

You will learn in this article

  • The basic process of writing Redux

  • How do I get public data in a store and display it on a page

  • How do I change the store’s public data to synchronize the component’s data with the store

. See below for more details on how to write the Redux code together. Here is a look at the final implementation, the add and remove list operations

Layout todolist using Ant-Design

For starters, a simple Todolist example is a great way to get started with Redux. It’s like writing the Hello World app when you first write it. To use Redux in React, you must install it on the command line

  • Use NPM or CNPM, and YARN (to use it, install it before using it) to install it
Yarn add redux or NPM install --save reduxCopy the code

After the installation, you can view redux in the root directory package.json. If it is correct, the installation is successful

  • How to use ant-design? How to use ant-design? How to use ant-design?
  • Again, it needs to be installed and then used in the project
yarn add antd
Copy the code

Then introduce styles in index.js

import 'antd/dist/antd.css'
Copy the code

Of course, you can also load components on demand, the specific configuration can refer to the official documentation below is the index.js code

import React from 'react';
import ReactDOM from 'react-dom';
import { Input, Button, List } from 'antd'; // Import antD component library import'antd/dist/antd.css'; Class TodoList extends React.Com {constructor(props){super(props); // This. State = {inputValue:'itclanCoder'// input form initial value list: ['itclanCoder'.'chuan chuan'.'learning Redux'] // The following list of data}}render() {
        return (
            <div style={{ margin: "10px 0 0 10px"}}>
                    <div>
                        <Input value={this.state.inputValue} style={{ width:"300px",marginRight:"10px"}}  placeholder="Please enter the content..." />
                        <Button type="primary"< div style={{width: 1em;'300px',marginTop:'10px'}}
				      bordered
				      dataSource={this.state.list}
				      renderItem={item => <List.Item>{item}</List.Item>}/>
            </div>
        )
    }
}
const container = document.getElementById('root');

ReactDOM.render(<TodoList />, container);
Copy the code

The final rendered UI looks like this:

Let’s introduce Redux to achieve the same effect

import React from 'react';
import ReactDOM from 'react-dom';
import { Input, Button, List } from 'antd'; // Import antD component library import'antd/dist/antd.css'; Create a store management repository and import the createStore function import {createStore} from redux'redux'; CreateStore () const store = createStore(reducer); After the reducer is created, we need to pass the reducer as a parameter to the createStore, so that the store can get the state data from the reducer. Reducer is a pure function that returns a new state to store // 4. Initialize the state value and remove the original state data from the reducer to managefunction reducer(state = {
	inputValue: 'itclanCoder',
	list: ['itclanCoder'.'chuan chuan'.'learning Redux']
}, action){
	returnstate; } // TodoList extends React.Com {constructor(props){super(props); This.state = store.getState(); this.state = store.getState(); }render() {
        return (
            <div style={{ margin: "10px 0 0 10px"}}>
                    <div>
                        <Input value={this.state.inputValue} style={{ width:"300px",marginRight:"10px"}}  placeholder="Please enter the content..." />
                        <Button type="primary"< div style={{width: 1em;'300px',marginTop:'10px'}}
				      bordered
				      dataSource={this.state.list}
				      renderItem={item => <List.Item>{item}</List.Item>}/>
            </div>
        )
    }
}
const container = document.getElementById('root');

ReactDOM.render(<TodoList />, container);
Copy the code

In the above example code, the state data originally defined in the component was removed to reducer management in Redux, and the state data was obtained from the current component through getState() method, and finally rendered to the page

Here’s how to use Redux:

  1. Install the Redux third-party library on the cli
yarn add redux
Copy the code
  1. Introduce the Redux library into the project and create a Store repository by calling the createStore function
import { createStore } from 'redux'; const store = createStore(); // Call createStore to actually create a storeCopy the code
  1. Create a Reducer function to store the data state of the common component. It is a pure function that returns the state of the component
/* Reducer is a pure function that receives two parameters,state and Action. State stores the public state of the reducer and action is the action sent by the reducer. The final result of reducer is jointly determined by state and action, and actions will be followed later * /function reducer(state, action){
    return state
}
Copy the code
  1. After the reducer is created, we need to pass the reducer to the createStore function so that the store gets the data from the Reducer. This is a must, otherwise the state data from the Reducer will not be available
const store = createStore(reducer);
Copy the code
  1. How does a component get data from a store by calling the getState method, which gets all the state stored on the store
this.state = store.getState();
Copy the code
  1. Component rendering
<Input value={ this,sate,inputValue }>
<List dataSource={this.state.list} />
Copy the code

The process above: What is actually done is the right hand side of the Redux workflow

Then the store gets the public storage data from the Reducer function. When the external component wants to get the public data from the store, the store is introduced and the data in the store can be obtained through the function getState, and finally the data can be rendered to the page

conclusion

This article is not a fancy article, but a small introduction to learning Redux

To summarize: How does a component get data from a Store

  • Install Redux, then import the createStore method from Redux and call it to create a store,

  • The return value of Reducer depends on the decision of state and action. Finally, this function returns the latest result which will be returned to store to complete the replacement of old and new data.

  • How do you get the store data in a component? Do you get all the states in a store using the getState method

So how do you keep the components of the page up to date with the Store data? How do you implement add, delete lists?

Will be revealed in the next section