Question

我是新来的反应redux，所以我想我只是缺少一些基本的东西。

我有三个reducer，两个用于处理在商店中作为数组更新的订单，另一个用于显示我用于从服务器接收订单的Web套接字连接的状态。

// reducers.js

import { combineReducers } from 'redux'

import { ADD_POS_ORDER, ADD_MOBILE_ORDER, UPDATE_WS_STATUS, wsStatuses } from '../actions/actions'
const { UNINITIALIZED } = wsStatuses

const posOrders = (state = [], action) => {
  switch (action.type) {
    case ADD_POS_ORDER:
      return [
        ...state,
        {
          id: action.order.id,
          status: action.order.status,
          name: action.order.name,
          pickupNum: action.order.pickupNum
        }
      ]
    default:
      return state
  }
}

const mobileOrders = (state = [], action) => {
  switch (action.type) {
    case ADD_MOBILE_ORDER:
      return [
        ...state,
        {
          id: action.order.id,
          status: action.order.status,
          name: action.order.name,
          pickupNum: action.order.pickupNum
        }
      ]
    default:
      return state
  }
}

const wsStatus = (state = UNINITIALIZED, action) => {
  switch (action.type) {
    case UPDATE_WS_STATUS:
      return action.status
    default:
      return state
  }
}

const displayApp = combineReducers({
  posOrders,
  mobileOrders,
  wsStatus
})

export default displayApp

当我连接到套接字时，我会调度一个动作来更新wsStatus，并将动作存储为“CONNECTED”。

当我使用posOrders reducer进行订单时，wsStatus将重置为默认值'UNINITIALIZED'。

我正在努力理解为什么wsStatus没有使用先前的'CONNECTED'状态，而是返回默认状态。

// actions.js

export const UPDATE_WS_STATUS = 'UPDATE_WS_STATUS'

export const wsStatuses = {
  UNINITIALIZED: 'UNINITIALIZED',
  CONNECTING: 'CONNECTING',
  CONNECTED: 'CONNECTED',
  DISCONNECTED: 'DISCONNECTED'
}

export const ADD_POS_ORDER = 'ADD_POS_ORDER'
export const ADD_MOBILE_ORDER = 'ADD_MOBILE_ORDER'
export const  UPDATE_POS_ORDER = 'UPDATE_POS_ORDER'

export const setWsStatus = (status) => {
  return {
    type: 'UPDATE_WS_STATUS',
    status: status
  }
}

export const updateOrderQueue = (action, order) => {
  return {
    type: action,
    id: order.id,
    order: order,
    receivedAt: Date.now()
  }
}

这是我拨打电话的地方：

// socketListeners.js

import { setWsStatus } from '../actions/actions'
import SockJS from 'sockjs-client'

export const socket = new SockJS('http://localhost:3000/echo')

export default function (dispatch, setState) {
  socket.onopen = function () {
    dispatch(setWsStatus('CONNECTED'))
  }

  socket.onclose = function () {
    dispatch(setWsStatus('DISCONNECTED'))
  }
}

// orders container

import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { socket } from '../helpers/socketListeners'

import { updateOrderQueue, setWsStatus } from '../actions/actions'
import PosOrder from '../components/queue/PosOrder'

class PosOrderList extends Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    const { dispatch } = this.props

    socket.onmessage = function(e) {
      // convert order info to object
      let parsedOrder = JSON.parse(e.data)
      let action = parsedOrder.action
      let order = parsedOrder.order

      dispatch(updateOrderQueue(action, order))
    }
  }

  render() {
    const { updateOrderQueue } = this.props
    return (
      <ul>
        {this.props.posOrders.map(posOrder =>
          <PosOrder
            key={posOrder.id}
            {...posOrder}
          />
        )}
      </ul>
    )
  }
}

PosOrderList.propTypes = {
  posOrders: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.hash,
    status: PropTypes.string,
    name: PropTypes.string,
    pickupNum: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
  }))
}

// send data to component props
const mapStateToProps = (state) => {
  return {
    posOrders: state.posOrders,
  }
}

export default connect(mapStateToProps)(PosOrderList)

// store

const store = configureStore(initialState)

export default function configureStore(initialState) {
  return createStore(
    displayApp,
    initialState,
    applyMiddleware(
      createLogger({
        stateTransformer: state => state.toJS()
      }),
      thunk,
      // socketMiddleware
    )
  )
}

addSocketListeners(store.dispatch, store.getState)

最后，商店会在此处记录： redux store

对此的任何和所有帮助将非常感谢！谢谢！

Answer 1

你的减速机工作正常https://jsfiddle.net/on8v2z8j/1/

var store = Redux.createStore(displayApp);
store.subscribe(render);
store.dispatch({type: 'UPDATE_WS_STATUS',status:'CONNECTED'});
store.dispatch({type: 'ADD_POS_ORDER',id:'id'});
store.dispatch({type: 'UPDATE_WS_STATUS',status:'DISCONNECTED'});

Answer 2

当您使用combineReducers组合reducer时，对于每个调度的操作，所有子减少器都会被调用，因为每个reducer都有机会响应每个操作。

因此，在调度第一个动作后，所有状态都会被初始化。

Redux combineReducer返回未调用的reducer的默认状态

2 个答案: