redux

一個專門用於做狀態管理的JS庫，基本上與react配合使用 作用：集中式管理react應用中多個元件共享的狀態   使用場景： 某個元件的狀態，需要讓其他元件可以隨時拿到（共享） 一個元件需要改變另一個元件的狀態（通訊） 總體原則：能不用就不用，如果不用比較吃力才考慮使用

 

 

使用案例 純react版本

import React, { Component } from 'react'

export default class Count extends Component {
    state = {
        count: 0
    }
    increment 
 
= () => {
        this.setState({
            count: this.state.count + this.selectNumber.value * 1
        })
    }
    decrement = () => {
        this.setState({
            count: this.state.count - this.selectNumber.value * 1
        })
    }
    incrementOdd = () => {
        if (this
 
.state.count % 2 !== 0) {
            this.setState({
                count: this.state.count + this.selectNumber.value * 1
            })
        }
    }
    incrementAsync = () => {
        setTimeout(() => {
            this.setState({
                count: this.state.count + this.selectNumber.value * 1
            })
        }, 
 
500)
    }
    render() {
        return (
            <div>
                <h1>當前求和為：{this.state.count}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementOdd}>奇數求和</button>
                <button onClick={this.incrementAsync}>非同步加</button>
            </div>
        )
    }
}

App.js檔案

import React from 'react'
import Count from './components/Count'
export default class App extends React.Component {
  render() {
    return (
      <div>
        <Count />
      </div>

    )
  }
}

 

redux精簡版 store.js檔案

//引入createStore 專門用於建立redux中最為核心的store物件
import { createStore } from 'redux'
//引入Count元件服務的reducer
import countReducer from './count_reducer'
const store = createStore(countReducer)
export default store

Count_reducer.js 檔案

/*
該檔案用於建立一個為Count元件服務的reducer，其本質就是一個函式
reducer函式會接到兩個引數，分別為：之前的狀態（prestate），動作物件（action）
*/
const initstate = 0
export default function countReducer(preState = initstate, action) {
    //從action物件中獲取：type，data
    const { type, data } = action
    //根據type決定如何加工資料
    switch (type) {
        case 'increment':
            return preState + data
        case 'decrement':
            return preState - data
        default:
            return preState
    }
}

import React, { Component } from 'react'
import store from '../../redux/store'
export default class Count extends Component {
    state = {
        // count: 0
    }
    // componentDidMount() {
    //     //檢測redux中狀態的變化，只要變化，就呼叫reder
    //     store.subscribe(() => {
    //         this.setState({})
    //     })
    // }
    increment = () => {
        store.dispatch({
            type: 'increment',
            data: this.selectNumber.value * 1
        })
    }
    decrement = () => {

        store.dispatch({
            type: 'decrement',
            data: this.selectNumber.value * 1
        })

    }
    incrementOdd = () => {
        const count = store.getState()
        if (count % 2 !== 0) {
            store.dispatch({
                type: 'increment',
                data: this.selectNumber.value * 1
            })
        }
    }
    incrementAsync = () => {
        setTimeout(() => {
            store.dispatch({
                type: 'increment',
                data: this.selectNumber.value * 1
            })
        }, 500)
    }
    render() {
        return (
            <div>
                <h1>當前求和為：{store.getState()}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementOdd}>奇數求和</button>
                <button onClick={this.incrementAsync}>非同步加</button>
            </div>
        )
    }
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from './redux/store'
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

store.subscribe(() => {
    root.render(<App />);
})

一般物件如Object {}:為同步 函式物件如function：為非同步 所謂非同步action是指返回一個函式

 

基本使用 明確兩個概念： （1）UI元件：不能使用任何redux的api，只負責頁面的呈現、互動等。 （2）容器元件：負責和redux通訊，將結果交給UI元件   如何建立一個容器元件—靠react-redux的connect函式         connect(mapStateToProps, mapDispatchToProps)        —mapStateToProps ：對映狀態，返回值為一個物件 —mapDispatchToProps：對映操作狀態的方法，返回值是一個物件   備註：容器元件的store是靠props傳進去的，而不是在容器元件中直接引入   優化

 

 

純函式 1.一類特別的函式：只要是同樣的輸入（實參），必定得到同樣的輸出（返回） 2.必須遵循以下約束

• 不得改寫引數資料
• 不會產生任何副作用，例如網路請求，輸入和輸出裝置
• 不能呼叫Date.now或者Math.random等不純的方法

3.redux的reducer函式必須是一個純函式    

打包一個專案

 npm run build  ---生成一個build的資料夾 npm install -g serve  —安裝一個全域性的serve伺服器 serve -s build  — 在伺服器上執行打包的檔案 執行之後谷歌的react開發者工具正常顯示