How to store properly on states with redux?-CodePudding

I am new to redux an i am having trouble in combining and displaying states from store..

index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import {configureStore} from '@reduxjs/toolkit'
import rootReducers from './features/rootReducers'
import { Provider } from 'react-redux'

const store = configureStore({
    reducer:rootReducers
})

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

projectReducers.jsx


const initState ={
  value:[
    {id:1 , title:'Mario World', content:'Pariatur amet ullamco incididunt quis consectetur occaecat voluptate ad.'},
    
    {id:2 , title:'Mario World2', content:'Pariatur amet ullamco incididunt quis consectetur occaecat voluptate ad.'},
    
    {id:3 , title:'Mario World3', content:'Pariatur amet ullamco incididunt quis consectetur occaecat voluptate ad.'}
  ]
}
const projectSlice  = createSlice(
  {name:'project',
  initialState:{initState},
  reducers:{
    list:(state,action)=>{
      state.value = initState.value.map(list => list.value)
    },
    addList:(state,action) =>{
      state.value =  action.payload
    }
  }
})



export const {list ,addList} =projectSlice.actions
export default projectSlice.reducer

it seems this way I'm trying to learn on storing data on state but it seems it gives some confusing error

rootReducer.jsx

import projectReducers from './projectReducers'
import { combineReducers }  from 'redux'


 const rootReducers = combineReducers({
  project: projectReducers
})

export default rootReducers

The error has been fixed but still there is a new occurring problem...

projects seems to return a value of undefined I tried to call the prop but its not displaying value[]

Dashboard.jsx

import React, { Component } from 'react'
import Notifications from './Notifications'
import ProjectList from '../projects/ProjectList'
import {connect} from 'react-redux'

 class Dashboard extends Component {
  render() {
    console.log(this.props.projects)
    return (
      <section className='w-full h-full flex justify-center'>
        <div className='grid gap-10 grid-cols-2'>
          <div className='grid p-4 grid-col-1 gap-4 bg-red-200'><ProjectList/></div>
          <div className='bg-green-400 '><Notifications/></div>
        </div>
       </section>
    )
  }
}

const mapStateToProps =(state) => {
  return{
    projects:state.project.value
  }
}

export default connect(mapStateToProps)(Dashboard)

CodePudding user response：

you need to pass the store to the Provider, not to the App. Please have a look at the official documentation on the provider before asking over here :)

Edit: for your second (additional) question, it seems like you are initializing your store wrongly using the configureStore. Again, have a look at the official documentation on the configure store, but you should just pass the combined reducer as a single property instead of passing an object.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import {configureStore} from '@reduxjs/toolkit'
import rootReducers from './features/rootReducers'
import { Provider } from 'react-redux'

const store = configureStore(rootReducers)

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