Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to realize the addition and subtraction function of redux application". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

1. Remove the state of the Count component itself. The count component is the sum component we need to use.

2.src to create a reducux file, reducux internal creation store and reducer, etc.:

-redux：

-store.js

-count_reducer.js

-count_action.js

-constant.js

3.In the store.js file:

1）。Introducing the createStore function in redux to create a store

2）。CreateStore calls pass a reducer serving it

3）。Remember to expose store objects

/*

This file is specifically used to expose a store object, and the entire application has only one store object

*/

//1. Introduce createStore, which is specially used to create the most core store object in redux

import { createStore } from "redux";

//2. Introduce a reducer serving the count component

import countReducer from './ count_reducer'

export default createStore（countReducer）

4.constant.js places easily misspelled type values

//convention constant type

export const INCREMENT = 'increment'

export const DECREMENT = 'decrement'

5.count_action.js is dedicated to creating action objects

/*

This file generates action objects specifically for the count component

*/

export const cteateIncrementActon = data => （{type:'increment',data}）

export const cteateDecrementActon = data => （{type:'decrement',data}）

6.In the count_reducer.js file:

1）。The essence of reducer is a function that receives: preState,action and returns the processed state.

2）。reducer has two functions: initialization state, processing state

3）。When reducer is called for the first time, it is automatically triggered by store

The preState passed is undefined,

The action passed is: {type: '@@REDUX/INIT_a.2.b.4}

/*

This file is used to create a reducer serving the count component. The essence of a reducer is a function.

The reducer function takes two arguments, the preState and the action.

*/

import {INCREMENT,DECREMENT} from './ constant'

const initState = 0

export default function countReducer（preState=initState,action）{

//get two values (what to do, data)

//Get: type, data from action object

const {type,data} = action

// if（preState === undefined） preState = 0

//Decide how to process data based on type

switch （type）{

case INCREMENT: //if yes

return preState + data

case DECREMENT: //if is minus

return preState - data

default:

return preState;

}

}

7. Monitor state changes in the store in index.js and re-render once changes occur

App

import React from 'react'

import ReactDom from 'react-dom'

import App from './ App'

import store from './ redux/store'

ReactDom.render（,document.getElementById（'root'））

store.subscribe（（）=>{

ReactDom.render（,document.getElementById（'root'））

}）

"Redux application addition and subtraction function how to achieve" the content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.