Блог

Я новичок в Redux. У меня есть редуктор с начальным состоянием с 2 свойствами.

Из компонента я отправляю данные в хранилище, но доставляется только одно из свойств — время или дата. Но мне нужно отправить и то, и другое.

Я попытался выполнить асинхронное/ожидание, думая, что у интерпретатора просто заканчивается время — хотя это и не так логично, я попытался. Это мне не помогло. Также я думал, что 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', payload: val }),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Appointment))

 

Весь экспорт и импорт присутствуют в моем коде.

Итак, если я отправлю onConfirmClick только this.props.onDateSet({someObj})```, I will get in my Redux state дату: {someObj} . Same about time - I will get время: {someObj}«.

Но если я соединю эти 2 реквизита вместе, в магазин будет доставлен только один.

Я предполагаю, что проблема глубже, чем логика, вероятно, я недостаточно хорош ни в системе React, ни в Redux.

Кто — нибудь знает, в чем проблема?

Заранее спасибо!

Ваши редукторы ошибаются, вы тоже должны их вернуть state . В данный момент вы полностью переписываете его:

 return {
  date: action.payload,
}
 

Измените свое заявление о возврате на следующее:

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

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