标签：count dispatch react increment 组件 import redux store

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'})

标签：count,dispatch,react,increment,组件,import,redux,store
来源： https://www.cnblogs.com/tian-qi/p/15365140.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。