Hey there! Let's break down and fix those two Redux problems you're facing step by step. First, we'll tackle the store creation issue, then address the mapStateToProps error.

1. Redux Store Not Being Created #

First off, your reducer file has a couple of syntax errors that are probably preventing your store from being set up correctly. Let's fix those first. Looking at your src/components/reducers/index.js code:

You’ve got two small but critical mistakes:

• A trailing comma after the tasksReducer function (should be a semicolon)
• Missing the const keyword before reducers = combineReducers(...)

Here's the corrected reducer code, plus a crucial addition (a default case for the switch statement):

import { combineReducers } from 'redux';

const tasksReducer = (state = [], action) => {
  switch(action.type){
    case 'ADD_TASK':
      state = state.concat(action.payload);
      break;
    case 'DELETE_TASK':
      state = state.slice();
      state.splice(action.payload, 1);
      break;
    // Always add a default case to handle unrecognized actions!
    // Without this, unexpected actions could break your state
    default:
      return state;
  }
  return state;
};

const reducers = combineReducers({ tasks: tasksReducer });
export default reducers;

Next, you need to actually create the Redux store and wrap your entire app with React-Redux’s Provider component. This makes the store available to all connected components (like your Taskbar). Add this to your root file (usually src/index.js):

import React from 'react';
import ReactDOM from 'react-dom/client';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducers from './components/reducers/index';
import App from './App';

// Create the store using your corrected reducers
const store = createStore(reducers);

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

This sets up the store properly and makes it accessible throughout your app.

2. "mapStateToProps() must return a plain object. Received undefined" in Connected Taskbar #

This error usually pops up for one of two reasons—let's check both:

Reason 1: Your mapStateToProps function isn’t returning a valid object #

Double-check how you’re connecting your Taskbar component. Your mapStateToProps needs to explicitly return an object with the state slices you want to pass as props. It should look like this:

import { connect } from 'react-redux';

const mapStateToProps = (state) => {
  // Make sure you return an object here!
  return {
    tasks: state.tasks // This matches the 'tasks' key we set in combineReducers
  };
};

export default connect(mapStateToProps)(Taskbar);

If you forget the return statement, or return something that’s not an object (like undefined), you’ll get this error.

Reason 2: Your reducer wasn’t maintaining state correctly #

Even if your mapStateToProps is correct, a broken reducer can lead to unexpected state values. That’s why we added the default case in the corrected reducer—without it, any action that doesn’t match ADD_TASK or DELETE_TASK could cause issues down the line.

As a side note, your DELETE_TASK logic works, but we can make it more aligned with Redux’s immutability best practices by using filter instead of splice (no need to copy the array first!):

case 'DELETE_TASK':
  return state.filter((_, index) => index !== action.payload);

This creates a new array without the deleted task, which is cleaner and avoids any accidental mutation.

内容的提问来源于stack exchange，提问作者Madhumi Munasinghe