Get Redux state values

Question

EDIT: I think the issue is with my reducers I only have one reducer called "filmsReducer" where I do this at the end :

export default combineReducers({
  films: filmsReducer
});

I'm doing an app in React Native using Redux,

I want to get the initialState values below in a component :

const initialState = {
  name: "",
  likedFilms: [299534, 49530, 629],
  dislikedFilms: [100241, 559969]
};

const filmsReducer = (state = initialState, action) => {
  const { likedFilms, dislikedFilms } = state;
  switch (action.type) {
    case ADD_FILM:
      if (action.array === "like") {
        const newLikedFilms = [...state.likedFilms, action.payload];

        return {
          ...state,
          likedFilms: newLikedFilms
        };
      } else {
        const newDislikedFilms = [...state.dislikedFilms, action.payload];

        return {
          ...state,
          dislikedFilms: newDislikedFilms
        };
      }

    default:
      return state;
  }
};

And here's the component, I want to get likedFilms array from the redux state in the props of this component, but the console log doesn't work :

class LikedScreen extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log(this.props.likedFilms); <-- doesn't work
  }
}

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

export default connect(mapStateToProps)(LikedScreen);

Try logging your state - state.likedFilms is undefined, because likedFilms is not your reducer, hence not your state. — Konstantin
– Konstantin, Commented Nov 21, 2019 at 12:23
@Dan I don't have a rootReducer, only a filmsReducer and at the bottom of the filmsReducer, I use combineReducers({ films: filmsReducer }) — VersifiXion
– VersifiXion, Commented Nov 21, 2019 at 12:27

Tim · Accepted Answer · 2019-11-21 12:23:30Z

4

Regarding your comment, you probably have to adapt your code to the following:

Edit Regarding another comment of yours, you need to change it to films instead of FilmsReducer:

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

answered Nov 21, 2019 at 12:23

Tim

10.7k4 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VersifiXion Over a year ago

thank you it works, because of the way I named my reducer in the export of the FilmsReducer.js

Nouman Janjua · Accepted Answer · 2019-11-21 12:32:11Z

0

It will be like, use reducer name as while mapping props in Component

class LikedScreen extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log(this.props.likedFilms); <-- doesn't work
  }
}

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

export default connect(mapStateToProps)(LikedScreen);

edited Nov 21, 2019 at 12:32

answered Nov 21, 2019 at 12:25

Nouman Janjua

4102 silver badges9 bronze badges

5 Comments

VersifiXion Over a year ago

it says TypeError: TypeError: undefined is not an object (evaluating 'state.filmsReducer.likedFilms'), I only have one reducer : the filmsReducer

Nouman Janjua Over a year ago

it might be because you didn't register this reducer in root reducer

VersifiXion Over a year ago

ok so I will always need a rootReducer ? I can't juste use my filmsReducer ?

Nouman Janjua Over a year ago

that was because you registered your filmsReducer with the name films in combineReducers({ films: filmsReducer })

VersifiXion Over a year ago

okkkkk so in the mapStateToProps, I have to put likedFilms: state.films.likedFilms

Collectives™ on Stack Overflow

Get Redux state values

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related