F
F
ffads livd002021-02-17 08:43:48
React
ffads livd00, 2021-02-17 08:43:48

Why is data not coming to combineReducers?

There is a reducer, if you create storage through it, then everything works fine.
Then another reducer was needed and I stuffed them into the combine reducer and now the error is "todos.map is not a function"
The error is somewhere in the file with the combine, help
index.js

import React from 'react'
import { render } from 'react-dom'

import { Provider } from 'react-redux'
import { createStore } from 'redux'
import App from './components/App'
import reducer from './reducers'

const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')

reducers/index.js
import { combineReducers } from 'redux'
import addTodo from './addTodo'

const reducer = combineReducers({
  addTodo,
})

export default reducer

reducers/addTodo.js - the file from which storage was previously created and data was drawn
const initialState = []

 const addTodo = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return  [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ]
    case 'REMOVE_TODO':
      return state.filter(todo =>
        todo.id !== action.id
      )
    case 'TOGGLE_TODO':
      return state.map(todo =>
        (todo.id === action.id) 
          ? {...todo, completed: !todo.completed}
          : todo
      )
    case 'RENAME_TODO':
      return state.map(todo =>
        (todo.id === action.id) 
        ? {...todo, text: action.text}
        : todo
      )
    default:
      return state
  }
}

export default addTodo

components/TodoList.js - rendering
import Todo from './Todo'
import {connect} from 'react-redux'

const mapStateToProps = (state) => ({
  todos: state
});

const TodoList = ({ todos, }) => {
  return(
    <ul>
      {todos.map(todo => (
        <Todo key={todo.id} todo={todo}/>
      ))}
    </ul>
  )
}

export default connect(mapStateToProps)(TodoList)

Answer the question

In order to leave comments, you need to log in

1 answer(s)
P
Pavel Shvedov, 2021-02-17
@livd98

In mapStateToProps, you map the entire state to todo, and the State with the todos lies in state.addTodo, corresponding to what field name was in the object that you passed to combineReducers

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question