2017-01-15 5 views
0

Я следую учебнику Redux и делаю простое приложение TODO. Приложение уже имеет несколько страниц и редукторов. Это означает, что я не могу получить все тодо (я называю их целями), потому что они не определены. У кого-то есть идея?Учебник Redux TODO, состояние не определено

import React from 'react'; 
import { connect } from 'react-redux'; 

import { toggleGoal } from 'containers/CounterPage/actions' 
import GoalList from 'components/GoalList' 


const getVisibleGoals = (goals, filter) => { 
    console.log(goals) 
    switch (filter) { 
    case 'SHOW_ALL': 
     return goals 
    case 'SHOW_COMPLETED': 
     return goals.filter(g => g.completed) 
    case 'SHOW_ACTIVE': 
     return goals.filter(g => !g.completed) 
    default: 
     return goals 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     goals: getVisibleGoals(state.goals, state.visibilityFilter) 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onGoalClick: (id) => { 
     dispatch(toggleGoal(id)) 
    } 
    } 
} 
const VisibleGoal = connect(mapStateToProps,mapDispatchToProps)(GoalList); 

export default VisibleGoal 

REDUCER

/* 
* 
* CounterPage reducer 
* 
*/ 

import { combineReducers } from 'redux'; 

const goal = (state = {} , action) => { 
    switch (action.type) { 
    case 'ADD_GOAL': 
     return { 
     id: action.id, 
     text: action.text, 
     completed: false 
     } 
    case 'TOGGLE_GOAL': 
     if (state.id !== action.id) { 
     return state 
     } 

     return Object.assign({}, state, { 
     completed: !state.completed 
     }) 

    default: 
     return state 
    } 
} 

const goals = (state = [] , action) => { 
    switch (action.type) { 
    case 'ADD_GOAL': 
     return [ 
     ...state, 
     goal(undefined, action) 
     ] 
    case 'TOGGLE_GOAL': 
     return state.map(t => 
     goal(t, action) 
    ) 
    default: 
     return state 
    } 
} 

const visibilityFilter = (state = 'SHOW_ALL', action) => { 
    switch (action.type) { 
    case 'SET_VISIBILITY_FILTER': 
     return action.filter 
    default: 
     return state 
    } 
} 

const counterPageReducer = combineReducers({ 
    goals, 
    visibilityFilter 
}) 

export default counterPageReducer; 

ВЫХОД КОНСОЛЬ

Uncaught (in promise) TypeError: Cannot read property 'goals' of undefined 
    at mapStateToProps (eval at ./app/containers/VisibleGoal/index.js 

ГОСУДАРСТВЕННАЯ ДЕРЕВО STATE

Посмотрите на лог консоли. Государство работает, но не получает цели из государства. Ошибка говорит, что не может отобразить неопределенные

+1

Пожалуйста, разместите редуктор и вывод журнала консоли – FabioCosta

+0

@FabioCosta Обновлено –

+0

Вы уверены, что ошибка находится в нужном месте? Это говорит о том, что 'state' не определено (не может прочитать« цели цели »неопределенного) –

ответ

0

ответ должен был изменить способ цели были извлеченного из состояния

const mapStateToProps = (state) => { 
    return { 
     goals: getVisibleGoals(state.get('counterPage').goals, state.get('counterPage').visibilityFilter) 
    } 
} 

State.get («counterPage») цели. -> из-за combinationReducer

Смежные вопросы