看懂Redux的基礎案例（無action實作加法）

實作效果

入口檔案index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import store from './redux/store'

ReactDOM.render(<App store={store}/>,document.querySelector('#root'))

store.subscribe(() => {
    ReactDOM.render(<App store={store}/>,document.querySelector('#root'))
});
      

外殼檔案App.js

import React, { Component } from 'react';

class App extends Component {

    componentDidMount() {
        console.log(this.props.store);
    }
    Increment = () => {
        const {value} = this.selectNumber;
        this.props.store.dispatch({type: 'increment',data: value*1})
    };
    Decrement = () => {
        const {value} = this.selectNumber;
        this.props.store.dispatch({type: 'decrement',data: value*1})
    }
    IncrementIfOdd = () => {
        const {value} = this.selectNumber;
        const count = this.props.store.getState();
        if (count % 2 !== 0) {
            this.props.store.dispatch({type: 'increment',data: value*1});
        }
    }
    IncrementAsync = () => {
        const {value} = this.selectNumber;
        setTimeout(() => {
            this.props.store.dispatch({type: 'increment',data: value*1});
        },1000)
    }
    render() {
        const count = this.props.store.getState();
        return (
            <div>
                <h1>目前求和為：{count}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;&nbsp;
                <button onClick={this.Increment}>+</button>&nbsp;
                <button onClick={this.Decrement}>-</button>&nbsp;
                <button onClick={this.IncrementIfOdd}>奇數則+</button>&nbsp;
                <button onClick={this.IncrementAsync}>異步+</button>
            </div>
        );
    }
}

export default App;
      

reducer.js

let initState = 0;
export default function operatorCount(preState = initState, action) {
    // 規則：不能修改傳遞過來的preState
    console.log('reducer被調用了');
    const { type, data } = action;
    let newState;
    switch (type) {
        case 'increment':
            newState = preState + data;
            return newState;
        case 'decrement':
            newState = preState - data;
            return newState;
        default:
            return preState;
    }

}
      

store.js

import {createStore} from 'redux';
import reducer from './reducer'
export default(createStore(reducer))