react-redux的簡單使用（入門）

第一步 安裝react-redux

npm install react-redux

第二步 創建store和reducer

store.js文件

import {createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

reducer.js文件

const defaultState = {
    inputValue:'hello',
    list:['a','b','c']
}
export default (state = defaultState,action) => {
    return state
}

第三步 在index.js入口文件引入Provider組件

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './reactredux/TodoList'
import {Provider} from 'react-redux'
import store from './reactredux/store'

const APP = (
    <Provider store={store}>
        <TodoList></TodoList>
    </Provider>
);

ReactDOM.render(APP , document.getElementById('root'));

第四步 在TodoList.js組件中引入connect組件

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

export class TodoList extends Component {

    render() {
        return (
            <div>
                <input type='text' value={this.props.inputValue} onChange={this.props.changeInputValue}></input>
                <button onClick={this.props.addClick.bind(this)}>添加</button>
                <hr></hr>
                <ul>
                    {this.props.list.map((item,index)=>{
                        return (
                            <li key={index}>{item}</li>
                        );
                    })}
                </ul>
            </div>
        )
    }
}

const mapStateToProps = (state) =>{
    return {
        inputValue: state.inputValue,
        list:state.list
    }
}

const mapDispatchToProps = (dispatch) =>{
    return {
        changeInputValue(e){
            const action = {
                type:"change_inputvalue",
                inputValue:e.target.value
            }
            dispatch(action);
        },
        addClick(){
            const action = {
                type:"add_list",
                value:this.props.inputValue
            }
            dispatch(action);
        }
    }
}

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

第五步 在reducer中接收action的值

const defaultState = {
    inputValue:'hello',
    list:['a','b','c']
}
export default (state = defaultState,action) => {
    if(action.type === 'change_inputvalue'){
        const newState = JSON.parse(JSON.stringify(state));
        newState.inputValue = action.inputValue;
        return newState;
    }

    if(action.type === 'add_list'){
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.push(action.value);
        newState.inputValue = "";
        return newState;
    }
    
    return state
}