Объект в состоянии редукции исчезает при запуске другого действия

У меня есть массив данных, который загружается в состояние redux, когда компонент Main загружается в поле Data, и у меня есть английский язык приложения по умолчанию, который также хранится в состоянии redux, если я нажму на кнопку, чтобы запустить действие setLanguage, оно будет измените язык, но он также очистит массив данных.

Как я могу предотвратить опорожнение массива данных при изменении языка?

сокращение

data: []
language: english

Main.js

class Main extends React.Component {

  componentDidMount() {
    this.props.fetchData()
  }

  render() {
    const {language} = this.props
    const e = language === 'english'
    const p = language === 'polish'
    return(
      <Wrap>
        <Router>
          <ScrollToTop>
          <Header />
            <Wrap>
              <Switch>
                <Route exact path = "/" component = {Home} />
                <Route exact path = "/reviews" component = {Reviews} />
                <button onClick = {this.props.fetchData}>click</button>
                   {/* <Route exact path = "/reviews/:catId" component = {Reviews} />
                <Route exact path = "/reviews/:catId/:slug" component = {Review} /> */}
                {/* <Route exact path = "/" component = {Home} /> */}
                {/* <ScrollToTop path = "/reviews/:catId" component = {Review} /> */}
                {/* <ScrollToTop path = "/another-page" component = {Reviews} /> */}
              </Switch>
            </Wrap>
          </ScrollToTop>
        </Router>
      </Wrap>
    )
  }
}

const mapStateToProps = state => ({
  language: state.language
});

export default connect(mapStateToProps, actionCreators)(Main);

MainActions.js

import axios from 'axios'
import {
  FETCH_DATA
} from '../../Constants'

export function fetchData() {
  return dispatch =>
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        dispatch({ type: FETCH_DATA, payload: response.data });
      })
      .catch((err) => {
        console.error(err);
      });
}

dataReducer.js

import {
  FETCH_DATA
} from '../Constants'


const dataReducer = (state = [], action) => {
  return{
    ...state,
    data: action.payload
  }
}

export default dataReducer;

Header.js

class Header extends React.Component { 
  render() {
    const {language} = this.props
    const e = language === 'english'
    const p = language === 'polish'
    return (
      <Wrapper>
              <button onClick = {()=>this.props.setLanguage('english')}>english</button>
              <button onClick = {()=>this.props.setLanguage('polish')}>polish</button>
              <div>
                {e && <div>language is english</div>}
                {p && <div>language is polish</div>}
      </Wrapper>
    )
  }
}

const mapStateToProps = state => ({
  language: state.language
});

export default connect(mapStateToProps, actionCreators)(Header);

headerActions.js

import {
  SET_LANGUAGE
} from '../../Constants'

export function setLanguage(language) {
  return {
    type: SET_LANGUAGE,
    language
  }
}

languageReducer.js

import {
  SET_LANGUAGE
} from '../Constants'

const initialState = 'english'

const languageReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_LANGUAGE:
      action.language
    default:
      return state;
  }
};

export default languageReducer;

combReducers.js

const rootReducer = combineReducers({
  language: languageReducer,
  data: dataReducer
});

export default rootReducer;

Используете ли вы combReducers для объединения обоих редукторов?

Vijay Venugopal Menon 24.08.2018 20:18

Да, я обновил вопросы

tom harrison 24.08.2018 20:20

Я считаю, что это связано с dataReducer, поскольку если я изменяю формат, он сохраняет данные, но отображает их неправильно в redux

tom harrison 24.08.2018 20:21

Я думаю, что вы правильно задали свой вопрос, но я действительно рекомендую поместить его в код или что-то подобное - так на него будет намного легче ответить. И процесс помещения его в код и воспроизведение ошибки поможет вам отладить ее.

dwjohnston 24.08.2018 20:23

У меня аналогичная проблема, я использую Immutable.js для управления данными.

HarshvardhanSharma 12.11.2018 15:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
5
1 350
1

Ответы 1

Я изменил dataReducer, теперь он хранит данные и не исчезает при срабатывании действия SET_LANGUAGE

const dataReducer = (state = [], action) => {
  switch (action.type) {
    case 'FETCH_DATA':
    return {
      ...state,
      data: action.payload
    };
    default:
      return state;
  }
}

У меня аналогичная проблема, не могли бы вы сказать мне, в чем разница между вашим старым и новым кодом?

anhnq 15.01.2020 15:40

Другие вопросы по теме