redux應用加減求和功能怎么實現

本篇內容介紹了“redux應用加減求和功能怎么實現”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

1.去除Count組件自身的狀態count組件為我們需要使用的求和組件

2.src下建立redux文件，redux內部創建store以及reducer等等：

-redux：

-store.js

-count_reducer.js

-count_action.js

-constant.js 

3.store.js文件中：

1）。引入redux中的createStore函數，創建一個store

2）。createStore調用時要傳入一個為其服務的reducer

3）。記得暴露store對象

/*

該文件專門用于暴露一個store對象，整個應用只有一個store對象

*/

//1.引入createStore，專門用于創建redux中最為核心的store對象

import { createStore } from "redux";

//2.引入為count組件服務的reducer

import countReducer from './count_reducer'

export default createStore（countReducer）

4.constant.js 放置容易寫錯的type值

//約定常量類型

export const INCREMENT = 'increment'

export const DECREMENT = 'decrement'

5.count_action.js 專門用于創建action對象

/*

該文件專門為count組件生成action對象

*/

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

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

6.count_reducer.js文件中：

1）。reducer的本質是一個函數，接收：preState,action，返回加工后的狀態

2）。reducer有兩個作用：初始化狀態，加工狀態

3）。reducer被第一次調用時，是store自動觸發的，

傳遞的preState是undefined,

傳遞的action是：{type:’@@REDUX/INIT_a.2.b.4}

/*

該文件時用于創建一個為count組件服務的reducer，reducer的本質就是一個函數

reducer函數會接到兩個參數，分別為之前的狀態（preState），動作對象（action）

*/

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

const initState = 0

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

    //拿到兩個值（要干嘛，數據）

    //從action對象中獲取：type，data

    const {type,data} = action

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

    //根據type決定如何加工數據

    switch （type）{

        case INCREMENT: //如果是加

          return  preState + data 

        case DECREMENT: //如果是減

          return  preState - data 

        default:

        return preState;

    }

}

7.在index.js中監測store中狀態的改變，一旦發生改變重新渲染

App

import React from 'react'

import ReactDom from 'react-dom'

import App from './App'

import store from './redux/store'

ReactDom.render（<App />,document.getElementById（'root'））

store.subscribe（（）=>{

    ReactDom.render（<App />,document.getElementById（'root'））  

}）

“redux應用加減求和功能怎么實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！