Redux： Update state

使用redux第一步

npm install --save react-redux

用Provider包裹住app；
且建立store，将reducer中的函数放入createstore；

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import {
   createStore} from 'redux';
import reducer from './store/reducer'; 
import {
   Provider} from 'react-redux';   //用于将store放入react
//create store
const store = createStore(reducer);

//传入store到app
ReactDOM.render(
<Provider store={
   store}> 
    <App />
</Provider>   , document.getElementById('root'));
registerServiceWorker();

Updating state immutably

在reducer中改变state，需要使用immutably方法

const initialState = {
   
    counter:0,
    results:[]
}

const reducer = (state=initialState, action) =>{
   
    switch (action.type){
   
        case 'INCREMENT':
            //object.assign 对object类型进行copy，但state中的array并不会进行深拷贝
            //const newState = Object.assign({},state);
           return {
                         //return一个obj，不在原地修改
            ...state,
            counter:state.counter+1
        }; 
        case 'DECREMENT':
            return{
   
                ...state,
            counter:state.counter-1
        };
        case 'ADD':
            return {
   
                ...state,
            counter:state.counter+action.val
        };
        case 'SUB':
            return {
   
                ...state,
            counter:state.counter-action.val
        };
        case 'STORE_RESULT':
            return{
   
                ...state,
                results:state.results.concat({
   id:new Date(),value:state.counter})   //concat返回一个新的array，并添加元素
            };
    }
    return state;   //需要默认传回原始数据——防止错误dispatch导致数据丢失
}

export default reducer;

每次返回一个新的obj，可以使用state的内容，但不能改变state的内容；
用concat代替push，因为concat返回新的array；

将多个state参数传入ui

用map将传入的array显示为li；

import React, {
    Component } from 'react';

import CounterControl from '../../components/CounterControl/CounterControl';
import CounterOutput from '../../components/CounterOutput/CounterOutput';


import {
   connect} from