redux的知识点（加法运算）

1. redux的流程图
   
   （1）创建store.js,reducer.js,安装redux，引入createStore，在createStore需要传入reducer

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

2.reducer概念：Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State
由于可能不止一个action，所有可以引入redux的{combineReducers}

//reducer模块 根据旧的state和指定的action返回新的state
import {combineReducers}  from 'redux'
function count(state = 2, action){
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}
const initUser={}
function user(state = initUser, action){
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}
export default combineReducers({
	count,
	user
})

3.React-Redux 提供Provider组件，可以让容器组件拿到state

import store from './redux/store';
import { Provider } from 'react-redux';
ReactDOM.render(
	 <Provider store={store}>
	        <App />
	 </Provider>,
document.getElementById('root'));

在App.js中

import React, { Component } from 'react'
import Counter from './count';
import {add} from './redux/action.js';
import { connect } from 'react-redux';
export default  connect(
	state=>({count:state.count}),
	{add}
)(Counter);

在count.js中

import React, { Component } from 'react'

class Counter extends Component {
constructor(props){
	    super(props)
	    this.state={
	
	    }
		console.log(props) 
	}
add=()=>{
		console.log(this.props)
		var num=this.props.count
		this.props.add({type:'INCREMENT',data:num})
	}
    render() {
        return (
            <div>
            <div>{this.props.count}</div>
             <button onClick={this.add}>++</button>
            </div>
        )
    }
}

export default Counter;

得到的结果如下