Компонент Redux + React-router не отображается

Question

Итак, я пытаюсь настроить React-router с помощью Redux. Я использовал this example для установки базового приложения.

Когда я пытаюсь отобразить мои компоненты, я получаю 1 ошибку и 2 предупреждения.

Ошибка: Uncaught TypeError: Cannot read property 'toUpperCase' of undefined.

Предупреждение # 1: Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).

Предупреждение # 2: Warning: Only functions or strings can be mounted as React components.

Я только что получил два простых компонента. A Root и компонент Container для проверки работоспособности.

Содержание компонента Root:

import React, { Component } from 'react'; 
import { Provider } from 'react-redux'; 
import { createHistory } from 'history'; 
import { createStore, combineReducers } from 'redux'; 
import { Router, Route } from 'react-router'; 
import timeline from '../reducers/timeline'; 

import Container from '../components/Container'; 

const store = createStore(combineReducers({timeline})); 

store.subscribe(() => { 
    console.info(store.getState()); 
}) 

const history = createHistory(); 

React.render(
    <Provider store={store}> 
    {() => 
     <Router history={history}> 
     <Route path="/" component={Container}/> 
     </Router> 
    } 
    </Provider>, 
    document.getElementById('root') 
); 

Содержание компонента Контейнер:

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

class Container extends Component { 
    render() { 
    return (
     <div id="outter"> 
     Container 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    console.log(state); 

    return { 
    test: state, 
    }; 
} 

export default connect(
    mapStateToProps, 
    { 
    type: 'TEST_ACTION', 
    } 
)(Container); 

Только в случае - содержание редуктора, а также:

const initialState = [ 
    {id: 1, message: 'Test message'}, 
]; 

export default function timeline(state = initialState, action = {}) { 
    switch (action.type) { 
    case 'TEST_ACTION': 
     return initialState; 
    default: 
     return state; 
    } 
} 

Answer 1

Одна проблема, которую я вижу, - это второй параметр, который вы передаете функции connect в компоненте Container. Вы передаете объект. Согласно the documentation, если вы передадите объект, он будет ожидать, что свойства этого объекта будут создателями действий (которые являются функциями). Так что это может выглядеть примерно так:

export default connect(
    mapStateToProps, 
    { 
    test:() => { type: 'TEST_ACTION' } 
    } 
)(Container); 

Это будет добавить свойство к вашему реквизиту под название test который будет функцией, которую вы можете вызвать для отправки тестового действия.