Блог

Итак, я изучаю, как использовать redux и redux persist, и в настоящее время я застрял в проблеме прямо сейчас. Всякий раз, когда я пытаюсь сопоставить содержимое моего магазина, он выдает сообщение об ошибке, TypeError: tasks.map is not a function и я действительно не знаю, почему возникает проблема. Я поискал в Google и попытался отладить его, также пару раз пытался переписать код, но все было безрезультатно. Вот весь мой код: rootReducer.js

 import React from 'react'

let nextToDo = 0;
const task=[
    {
    }
]
const reducer =(state=task, action)=>
{
    switch(action.type)
    {
        case 'add':
            return[
                ...state,
                {
                    name: 'new',
                    id: nextToDo =1
                }
            ]
        default:
            return state;
    }
}


export default reducer
  

store.js

 import reducer from './rootReducer'
import {applyMiddleware,createStore} from 'redux'
import logger from 'redux-logger'
import {persistStore, persistReducer} from 'redux-persist'
import storage from 'redux-persist/lib/storage'

const persistConfig ={
    key: 'root',
    storage
}
export const persistedReducer = persistReducer(persistConfig, reducer)
export const store = createStore(persistedReducer, applyMiddleware(logger));
export const persistor = persistStore(store);

export default {store, persistor}
  

Index.js:

 import React, {Component} from 'react'
import {createStore} from 'redux'
import reducer from './rootReducer'
import 'bootstrap/dist/css/bootstrap.min.css'
import {Button} from 'react-bootstrap'
import {store} from './store'
import {connect} from 'react-redux'

class Index extends Component {
    render(){
    const {tasks} = this.props
    const add=()=>
    {
        store.dispatch(
            {
                type: 'add', 
            }
        )
    }
    store.subscribe(()=>console.log('your store is now', store.getState()))
    return (
        <div>
            {tasks.map(task=><div>{task.name}</div>)}
            <Button onClick={()=>add()}></Button> 
        </div>
    )
}
}
const mapStateToProps=(state)=>
{
    return{
        tasks: state
    }
}

export default connect(mapStateToProps)(Index)
  

Попробуйте объявить состояние таким образом:

 state = {
  tasks: [{}]
}  

Затем, на Index.js , вы можете передать его реквизиту, сделав это:

 const mapStateToProps=(state)=>
{
    return {
        tasks: state.tasks
    }
}  

И использовать его внутри компонента с props.tasks