React-搭配Redux簡易教學

先利用React製作一個簡單的計數器

1. index.js

   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   
   ReactDOM.render(<App />, document.getElementById('root'));

2. App.js

   import React, {Component} from 'react';
   import Title from './components/Title';
   import Button from './components/Button';
   
   class App extends Component{
       render() {
           return(
               <div>
                   <Title/>
                   <Button/>
               </div>
           )
       }
   }
   
   export default App;

3. components資料夾底下 Title.js

如果組件沒有用到任何state的話，直接寫一個function即可

import React from 'react';

export default function Title() {
    return(
        <h1>計數器</h1>
    )
}

4. components資料夾底下 Button.js

   import React, {Component} from 'react';
   
   class Button extends Component{
       state = {
           num: 0,
       }
       add = () => {
           this.setState({
               num: this.state.num + 1
           })
       }
   
       minus = () => {
           this.setState({
               num: this.state.num - 1
           })
       }
       render() {
           return(
               <div>
                   <h2>{this.state.num}</h2>
                   <button type="button" onClick={this.add}>+1</button>
                   <button type="button" onClick={this.minus}>-1</button>
               </div>
           )
       }
   }
   
   export default Button;

接下來改用Redux改寫計數器

1. 安裝redux 、 react-redux

   npm install redux , react-redux --save

2. 新增資料夾reducer index.js(各個涵式的家)
   case的名稱要跟action的type對應，action操作行動時就會對應到相同名稱的涵式

const initState = {     初始設定
    num: 0,
}

const Counter = (state = initState, action) => {
    switch(action.type){
        case 'ADD' :
            return {
                num: state.num + 1
            };
        case 'MINUS' :
            return {
                num: state.num - 1
            };
        default :
            return state;
    }
}

export default Counter

3. 新增資料夾action index.js(行動)
   type的名稱要跟reducer switch case的名稱一樣

export const add = (num) => {
    return{
        type: 'ADD',
        num: num
    }
}

export const minus = (num) => {
    return{
        type: 'MINUS',
        num: num
    }
}

3. button.js
   刪除原本的初始值和涵式，改用redux操作
   import { connect } from ‘react-redux’ 為了和全域store操作，所以要連結使用
   import {add, minus} from ‘../action/index’ 載入所要使用到的操作行動即可
   mapStateToProps 連結到全域的state
   mapDispatchToProps 連結到要使用操作行動的涵式

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

import {add, minus} from '../action/index'

class Button extends Component{
    render() {
        return(
            <div>
                //一律改用props連結父層(全域store)相關檔案
                <h2>{this.props.num}</h2>   
                <button type="button" onClick={this.props.add}>+1</button>
                <button type="button" onClick={this.props.minus}>-1</button>
            </div>
        )
    }
}

const mapStateToProps = state => {
    return{
        num: state.num
    }
}
const mapDispatchToProps = dispatch => {
    return{
        add: num => {
            dispatch(add(num))
        },
        minus: num => {
            dispatch(minus(num))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Button);

4. app.js
   import { createStore } from ‘redux’; 創造全域store
   import Counter from ‘./reducer/index’; 載入reducer(所有涵式的地方)
   import { Provider } from ‘react-redux’; 使所有組件都可取得 store

import React from 'react';
import Title from './components/Title';
import Button from './components/Button';

import { createStore } from 'redux';

import Counter from './reducer/index';

import { Provider } from 'react-redux';

let store = createStore(
    Counter
)

function App(){
    return(
        <Provider store={store}>
            <Title/>
            <Button/>
        </Provider>
    )
}

export default App;