javascript - React-Redux - 如何在应用程序状态内设置字段？

Question

我正在学习Fractal Structure使用 React 和 Redux，但当我想设置应用程序状态时，我发现被阻止了。

我会尽力解释我的问题

src/router/Counter/index.js

import { injectReducer } from '../../store/reducers'

export default (store) => ({
  path: 'counter',
  getComponent (nextState, cb) {
    require.ensure([], (require) => {
      const Counter = require('./containers/CounterContainer').default
      const reducer = require('./modules/counter').default

      /*  Add the reducer to the store on key 'counter'  */
      injectReducer(store, { key: 'counter', reducer })

      cb(null, Counter)

    }, 'counter')
  }
})

src/router/Counter/modules/counter.js

// ------------------------------------
// Constants
// ------------------------------------
export const COUNTER_INCREMENT = 'COUNTER_INCREMENT'

// ------------------------------------
// Actions
// ------------------------------------
export function increment (value = 1) {
  return {
    type: COUNTER_INCREMENT,
    payload: value
  }
}

export const actions = {
  increment
}

// ------------------------------------
// Action Handlers
// ------------------------------------
const ACTION_HANDLERS = {
  [COUNTER_INCREMENT]: (state, action) => state + action.payload
}

// ------------------------------------
// Reducer
// ------------------------------------
const initialState = 0
export default function counterReducer (state = initialState, action) {
  const handler = ACTION_HANDLERS[action.type]

  return handler ? handler(state, action) : state
}

src/routes/Counter/containers/CounterContainer.js

import { connect } from 'react-redux'
import { increment } from '../modules/counter'

import Counter from 'components/Counter'

const mapActionCreators = {
  increment: () => increment(1)
}

const mapStateToProps = (state) => ({
  counter: state.counter
})

export default connect(mapStateToProps, mapActionCreators)(Counter)

我想在计数器状态下设置更多字段，因为我可以通过分隔来传递 Prop 。即:

const mapStateToProps = (state) => ({
      max: state.counter.max
      min: state.counter.min
})

那么，如何设置state.counter中的字段呢？

谢谢。

Answer 1

您需要使用reducer来更新状态属性。你的柜台是这样的。

function counter(state = initialState, payload) {
  switch (action.type) {
    case UPDATE_COUNTER:
      return Object.assign({}, state, {
        counter: {max:payload.max,min:payload.min}
      })
    default:
      return state
  }
}