爲什麼我的狀態不正確地映射到Redux中的道具？

Question

我創造了這個組件：

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

export class Todos extends Component { 
    render() { 
    //todo remove 
    console.log('testing this.props.todos', this.props.todos); 

    //todo remove 
    debugger; 

    return (
     <div>hello from todos</div> 
    ); 
    } 
} 

const mapStateToProps = function (store) { 
    return { 
     todos: store.todos 
    } 
} 

export default connect(mapStateToProps)(Todos) 

我使用的終極版，這是減速機：

const initialState = { 
    todos: [ 
    { 
     name:'first todo' 
    } 
    ] 
} 

const Todos = (state = initialState, action) => { 
    switch (action.type) { 
    case "ADD_TODO": 
     var newState = Object.assign({}, state, {todos: [...state.todos, action.data]}); 
     return newState; 
    default: 
     //todo remove 
     debugger; 
     return state; 
    } 
} 

export default Todos; 

出於某種原因，this.props.todos是不確定的，我的狀態不會被映射到我的道具正確。我怎樣才能將Redux商店連接到我的組件？

Answer 1

問題是您沒有正確地將商店傳遞到您的組件！如果要使用connect將組件連接到全局狀態，則必須使用react-redux提供的<Provider>組件。所以，首先你創建createStore爲你做你的店，然後將它傳遞到供應方：

import store from './store.js'; 
import { Provider } from 'react-redux'; 

const App =() => (
    <Provider store={store}> 
    <Todos /> 
    </Provider> 
); 

ReactDOM.render(
    <div className="container"> 
    <App /> 
    </div> 
, document.getElementById('root')); 

注意如何<Provider>用於提供商店，並使其可用於您的通話connect。另外，<Todos>不應該採取任何道具。此外，您的進口：

import { Todos } from './components/todos.jsx'; 

是錯誤的。你todos.jsx，要導出這樣的connect ED分量，作爲默認的出口：

export default connect(mapStateToProps)(Todos) 

所以，你必須導入默認，而不是：

import Todos from './components/todos.jsx';