reactjs 如何使用redux正确存储状态?

juzqafwq  于 2022-12-03  发布在  React
关注(0)|答案(1)|浏览(131)

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)
fivyi3re

fivyi3re1#

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

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>
)

相关问题