Redux 不会一次向 store 发送 2 个属性

问题描述

我是 Redux 的新手。我有一个具有 2 个属性的初始状态的 reducer。

我从一个组件向存储发送数据，但只传递了一个属性 - 时间或日期。但我需要同时发送。

我试图做 async/await 认为解释器只是用完了时间 - 即使它不那么合乎逻辑，我尝试了。它没有帮助我。我也认为 Redux 不能接受对象，但我研究并看到它可以。然后我向自己证明了它真的可以 - 我只是简单地只发送了 1 个属性。

代码片段如下。

*Reducer: *

const initialState = {
  date: {},time: {}
}

const dateTimeReducer = (state = initialState,action) => {
    switch (action.type) {
        case 'setDate':
            return {
                date: action.payload,}

        case 'setPickedCell':
            return {
                time: action.payload,}

        default:
            return state
    }
}
export default dateTimeReducer

*index.js*

import React from 'react'
import ReactDOM from 'react-dom'
import './css/style.comp.css'
import App from './App'
import { browserRouter } from 'react-router-dom'
import store from './redux/store'
import { Provider } from 'react-redux'
// import rootReducer from './redux/rootReducer'

// const store = createStore(rootReducer)

ReactDOM.render(
    <Provider store={store}>
        <browserRouter>
            <App />
        </browserRouter>
    </Provider>,document.getElementById('root')
)

*store.js*

import { createStore } from 'redux'
import rootReducer from './rootReducer'

const store = createStore(rootReducer)

export default store

*rootReducer.js*

import { combineReducers } from 'redux'
import dateTime from './reducers/dateTime'

export default combineReducers({ dateTime })

*Component - I will simplify,with a condition that I have no Syntax mistakes and the code works when I send only 1 of 2 properties to a Redux store*

import Date from ''
import Time from ''

class Comp extends React.Component {
  state = {
     date: {...},time: {...} // both date and time already set during rendering cycle - through a function 
                 // acceptStateFromDate and acceptStateFromTime
  }

  acceptStateFromDate() {
    this.setState({ date: stateData })
  } 

  // same about acceptStateFromTime - those functions are used to get state data from a child component and are called while componentDidMount

  acceptStateFromTime() {
    ...
  }

  onConfirmClick = () => {
    this.props.isAllowedHandler()
    this.props.onDateSet(this.state.datePicker)
    this.props.onCellSet(this.state.timePicker)
  }

  componentDidMount() {
    acceptStateFromDate() 
    acceptStateFromTime()
  } 

  render() {
    return (
      <div> 
        <div onClick={this.onConfirmClick}> Confirm </div>
        <Time sendState={acceptStateFromTime} />
        <Date sendState={acceptStateFromDate} />
    )
  }
}

function mapStatetoProps(state) {
    return {
        date: state.dateTime.date,time: state.dateTime.time,}
}

function mapdispatchToProps(dispatch) {
    return {
        onDateSet: (val) => dispatch({ type: 'setDate',payload: val }),onCellSet: (val) => dispatch({ type: 'setPickedCell',}
}

export default connect(mapStatetoProps,mapdispatchToProps)(withRouter(Appointment))

所有导出和导入都存在于我的代码中。

所以，如果我只通过 onConfirmClick 发送 this.props.onDateSet({someObj})```,I will get in my Redux state date: {someObj}. Same about time - I will get time: {someObj}````。

但是如果我把这两个道具放在一起，只有一个会送到商店。

我想问题比逻辑更深，可能我在 React 系统或 Redux 方面都不够好。

有人知道问题出在哪里吗？

提前致谢！

解决方法

您的减速器是错误的，您也必须返回 state。目前你正在完全重写它：

return {
  date: action.payload,}

将您的退货声明更改为以下内容：

return {
  ...state,date: action.payload,}

---

const dateTimeReducer = (state = initialState,action) => {
  switch (action.type) {
    case 'setDate':
      return {
        ...state,}
    case 'setPickedCell':
      return {
        ...state,time: action.payload,}
    default:
      return state
  }
}