redux應(yīng)用加減求和功能怎么實現(xiàn)

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

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

2.src下建立redux文件，redux內(nèi)部創(chuàng)建store以及reducer等等：

-redux：

-store.js

-count_reducer.js

-count_action.js

-constant.js 

3.store.js文件中：

1）。引入redux中的createStore函數(shù)，創(chuàng)建一個store

2）。createStore調(diào)用時要傳入一個為其服務(wù)的reducer

3）。記得暴露store對象

/*

該文件專門用于暴露一個store對象，整個應(yīng)用只有一個store對象

*/

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

import { createStore } from "redux";

//2.引入為count組件服務(wù)的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 專門用于創(chuàng)建action對象

/*

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

*/

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

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

6.count_reducer.js文件中：

1）。reducer的本質(zhì)是一個函數(shù)，接收：preState,action，返回加工后的狀態(tài)

2）。reducer有兩個作用：初始化狀態(tài)，加工狀態(tài)

3）。reducer被第一次調(diào)用時，是store自動觸發(fā)的，

傳遞的preState是undefined,

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

/*

該文件時用于創(chuàng)建一個為count組件服務(wù)的reducer，reducer的本質(zhì)就是一個函數(shù)

reducer函數(shù)會接到兩個參數(shù)，分別為之前的狀態(tài)（preState），動作對象（action）

*/

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

const initState = 0

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

    //拿到兩個值（要干嘛，數(shù)據(jù)）

    //從action對象中獲?。簍ype，data

    const {type,data} = action

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

    //根據(jù)type決定如何加工數(shù)據(jù)

    switch （type）{

        case INCREMENT: //如果是加

          return  preState + data 

        case DECREMENT: //如果是減

          return  preState - data 

        default:

        return preState;

    }

}

7.在index.js中監(jiān)測store中狀態(tài)的改變，一旦發(fā)生改變重新渲染

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應(yīng)用加減求和功能怎么實現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！