object in redux state disappearing when another action is triggered

Viewed 1821

I have an array of data that is loaded into redux state when the Main component loads into the Data field, and I have a default app language of english also stored in redux state, if I click on my button to trigger the setLanguage action it will change the language but it will also empty the data array.

How can I prevent the data array from being emptied when I change the language??

redux

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;

combineReducers.js

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

export default rootReducer;
1 Answers

I have changed the dataReducer , it now stores the data and doesn't disappear when the SET_LANGUAGE action is triggered

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