How to realize the addition and subtraction sum function of redux application
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!
