react中使用redux

明確概念：

Reducer

是一個純函數(shù)繁扎，接收舊的state和action，返回新的state
與被傳入Array.pototype.reduce(reducer, ?initialValue)里的回調(diào)函數(shù)屬于相同類型
保持reducer純凈十分重要紫谷，永遠不要在reducer中執(zhí)行如下操作：

修改傳入?yún)?shù)
執(zhí)行有副作用的操作（如API請求和路由跳轉(zhuǎn)）
調(diào)用非純函數(shù)（如Date.now() 或 Math.random()）

reduce

數(shù)組的reduce

array=[1,2,3,4,5]
const reducer = (sum ,currentValue)=> (
// 第一次循環(huán)，sum 等于1芦倒，currentValue等于2
// 之后循環(huán)currentValue被依次順序賦值轰豆，sum做累加結(jié)果
// 循環(huán)結(jié)束雪营，返回最終累加結(jié)果
  return sum + currentValue
)
array.reduce(reducer)

redux

什么是redux

redux是一個純粹的狀態(tài)管理器弓千，不僅限r(nóng)eact可以使用。將動作(action) 變換成 state 轉(zhuǎn)換函數(shù)(reducer)献起，然后放到一個統(tǒng)一的地方(store)來 setState
數(shù)據(jù)處理方式：默認只支持同步计呈，實現(xiàn)異步需要添加中間件（??：redux-thunk 和 redux-logger）

npm install redux-thunk edux-logger --S

專門用于react的redux是：react-redux

npm install redux --S
npm install react-redux --S

數(shù)據(jù)處理流程：

redux用法

創(chuàng)建倉庫（store）文件夾 (例如：xxxStore.js)砰诵。編寫如下內(nèi)容：

import {createStore} from 'redux'
// state有默認值，action從外界傳入
function counterReducer(state = 0, action) {
    switch (action.type) {
        case "add":
        return state + 10
            
        case "subtraction":
        return state - 20
            
        default:
            return state
    }
}

修改index.js

import store from './store/ReactReduxStore'
import {Provider} from 'react-redux'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
        <App />
    </Provider>
    
  </React.StrictMode>,
  document.getElementById('root')
);

在組件中捌显，導(dǎo)入倉庫，向props中添加事件和屬性

import React, {Component} from 'react'
import {connect} from 'react-redux'

// react-redux 提供了兩個重要API provider為后代組件提供store connect為組件提供數(shù)據(jù)和變更方法

class 組件名 extends Component {
    render() {
        console.log(this.props);
        
        const {counter, add, sub} = this.props

        return (
        <div>
            <div>react-redux</div>
            <p>{counter}</p>
            <button onClick={add}>add</button>
            <button onClick={sub}>subtraction</button>
        </div>
        )
    }
}

export default connect(
// 向props中添加事件和屬性
    // state
    state => {
        console.log(state);
        return {counter: state}
    },

    // dispatch
    {
        add: () => {
            return {type: "add"}
        },
        sub: () => {
            return {type: "subtraction"}
        }

    }
)(組件名)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者