sayinmehmet47
sayinmehmet47

Reputation: 551

Combine Reducers does not work in store,and does not send data to Components in Redux-React

I am new on redux.I want to implement redux on react. I have created todo list and it is working well with redux.As a practice I have created a new component called Calculate to increase and decrease a number under the todo list.I have two reducer for that.I combined two reducers in index.js.But as far as I understand combining is not working. I face with error like that " TypeError: this.props.messages.map is not a function".But when without combining the reducers,and sending only messaageReducer to store, my app working well.Here is my code.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import messageReducer from "./reducers/reducers"
import {Provider} from "react-redux"
import {combineReducers, createStore} from "redux"
import Calculate from "./calculate"
import counter from "./reducers/reducers2"



const rootReducer = combineReducers({
  counter,
  messageReducer,
 
})

const store = createStore(rootReducer)

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

Upvotes: 0

Views: 159

Answers (1)

phry
phry

Reputation: 44096

combineReducers changes the shape of your store.

What was state.X before is now state.messageReducer.X.

That's also, why messageReducer is a bad name here. Do

const rootReducer = combineReducers({
  counter,
  message: messageReducer,
})

instead and it will become state.message.X.

Also, please note that if you are doing all this by hand, you are probably learning an old style of Redux and are problably following outdated documentation. While this shows very well what Redux does internally, in modern Redux you should not be doing all this by hand. Please follow the official Redux tutorials at https://redux.js.org/tutorials/essentials/part-1-overview-concepts

Upvotes: 1

Related Questions