在react中使用redux并实现计数器案例 (3)

创建src/store/index.js文件 ，在这个文件中创建store 并导出

import { createStore } from 'redux'; import reducer from './reducers/counter.reducers' export const store = createStore(reducer)

在引入store的文件中改变为冲项目中store文件中引入store

import React from 'react'; import ReactDOM from 'react-dom'; import Count from './components/Count'; import { store } from './store' import { Provider } from 'react-redux' /** * react-redux 让react 和 redux 完美结合 * Provider 是一个组件 可以吧创建出来的store 放在一个全局的地方 让组件可以拿到store * connect 是一个方法 */ ReactDOM.render( // 通过provider组件 将 store 放在了全局的组件可以够的到的地方 provider要求我们放在最外层组件 <Provider store={store}><Count /></Provider>, document.getElementById('root') ); 为action 传递参数,对计数器案例做扩展

这个计数器案例已经实现了点击按钮加一减一操作了，现在有个新需求我们需要加减一个数值例如加五减五

这就需要对action传递参数了

在视图中按钮绑定函数传入参数

function Count({count,increment,decrement}) { return <div> <button onClick={() => increment(5)}>+</button> <span>{count}</span> <button onClick={() => decrement(5)}>-</button> </div> }

在dispacth执行action动作时接受参数并传入到action中

export const increment = payload => ({type: INCREMENT, payload}) export const decrement = payload => ({type: DECREMENT, payload})

在reducers中接收参数并作相应处理

export default (state = initialState, action) => { switch (action.type) { case INCREMENT: return { count: state.count + action.payload } case DECREMENT: return { count: state.count - action.payload } default: return state } }

原文地址：https://kspf.xyz/archives/10/