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)
1条答案
按热度按时间fivyi3re1#
您需要将存储传递给
Provider
,而不是App
。请先查看the official documentation on the provider,然后再询问此处:)编辑:对于您的第二个(附加)问题,看起来您错误地使用了
configureStore
来初始化您的存储。同样,请查看configure存储的官方文档,但是您应该只将组合的reducer作为单个属性而不是对象来传递。