redux搭配react-redux进行跨组件通信开发

Redux	API	作用
	createStore	用于创建一个store对象
	bindActionCreators	用于简化操作，不用开发者手动触发dispatch

React-redux	API	作用
	Provider	Provider用于包裹根组件，使所有被包裹的组件都能通过connect访问store，以便进行跨组件通信
	Connect	Connect用于连接react和store中的数据，在被Provider包裹的组件中，通过connect方法可以将store中的数据映射到组件的props中

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from '../src/Components/counter';
import { createStore } from 'redux'
import { Provider } from 'react-redux';
const initialState = {
  count: 0
}
function reducer (state = initialState, action) {
  switch (action.type) {
    case 'increment':
      return {
        count: state.count + 1
      }
    case 'decrement': 
      return {
        count: state.count - 1
      }  
    default: 
      return state  
  }
}
const store = createStore(reducer)
ReactDOM.render(
  <Provider store = { store }>
    <Counter />
  </Provider>,
  document.getElementById('root')
);

Counter.js

import React from 'react';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actionCreators from './actionCreators'
function Counter ({count, increment, decrement}) {
    console.log('increment', increment)
    return (
        <div>
            <button type="button" onClick={increment} >+</button>
            <span>{count}</span>
            <button type="button" onClick={decrement} >-</button>
        </div>
    )
}

// 1. connect 方法会帮助我们订阅store，当store中的黄台发生更改的时候，会帮助我们重新渲染组件
// 2. connect 方法可以让我们获取store中的状态，将状态通过组件的props属性映射给组件
// 3. connect 方法可以让我们获取 dispatch 方法

// 这里的state就是store存储的数据, mapStatetoProps返回对象
const mapStatetoProps = state => ({
    count: state.count
})

// mapdispatchToProps返回对象， 返回的对象会被映射到props中

// const mapdispatchToProps = dispatch => ({
//     increment ()  {
//         dispatch({type: 'increment'})
//     },
//     decrement () {
//         dispatch({type: 'decrement'})
//     }
// })

// 对于mapdispatchToProps以上的写法可以进一步简化操作，这里我们可以用redux的bindActioCreators方法
/*
    个人理解: 以前时通过dispatch去触发每个action，现在通过bindActionCreators方法，
    将我们需要触发的action放在单独的文件处理,
*/ 

const mapdispatchToProps = dispatch => bindActionCreators(actionCreators,dispatch)
    

export default connect(mapStatetoProps, mapdispatchToProps)(Counter);

actionCreators.js

export const increment = () => ({type: 'increment'})
export const decrement = () => ({type: 'decrement'})