I'm starting learn React + Redux , I'm doing a simple application for add or remove a movie in a basket.
But I have a problem on a reducer . I try a lot of things without result...
Thanks in advance :)
Here is my code :
The reducer :
import '../actions/actionsTypes';
import { movies } from '../components/movie/data.json';
let initialState = []
movies.map((movie) => {
initialState.push({
id : movie.id,
title: movie.title,
year: year.title,
isAdd: false,
isRemove: false
})
return movie
})
const establishment = (state = {}, action) => {
switch (action.type) {
case ADD :
if (state.id !== action.data.id)
return state
return (
...state,
isAdd : !state.isAdd
)
case REMOVE :
if (state.id !== action.data.id)
return state
return (
...state,
isRemove : !state.isRemove
)
default:
return state
}
}
const establishmentsReducer = (state = initialState, action) => {
switch (action.type) {
case ADD :
return state.map(movieState =>
movie(movieState, action)
)
case REMOVE :
return state.map(movieState =>
movie(movieState, action)
)
default:
return state
}
}
export default movieReducer;
The connection of the reducer ( I know it's not useless but in the furtur will have to combine reducer ) :
import { combineReducers } from 'redux';
import movieReducer from './movieReducer';
const allReducers = combineReducers({
movie : movieReducer
})
export default allReducers;
index.js :
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import allReducers from './reducers';
import './index.css';
import App from './components/App';
import * as serviceWorker from './serviceWorker';
const store = createStore(allReducers);
ReactDOM.render(
<Provider store={ store }>
<App/>
</Provider>,
document.getElementById('root')
)
In your reducer, change:
export default movieReducer;
To:
export default establishmentsReducer;
This is because you need to export an actually defined function or variable, in this case establishmentsReducer
. The code you shared in the reducer file does not have any functions/variables/expressions defined/named as movieReducer
.
Another option would be to just change const establishmentsReducer = (state = initialState, action) => {
to const movieReducer = (state = initialState, action) => {
.
Hopefully that helps!
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments