Redux未連接到React組件

我一直在玩Redux，但我似乎無法得到它與React連接。我正在使用connect和mapStateToProps，但我商店中的道具沒有被傳入我的組件。也許有人可以闡明爲什麼我的代碼不起作用？我猜測它與mapStateToProps函數有關。Redux未連接到React組件

這裏，我已經得到了代碼：

import { connect, Provider } from 'react-redux'; 
import { createStore, combineReducers } from 'redux'; 
import React from 'react'; 
import ReactDOM from 'react-dom';`enter code here` 


const greetReducer = (state = '', action) => { 

    if (action.type === 'greet') { 

    state = action.greeting 

    } 

    return state; 

}; 

const runReducer = (state = '', action) => { 

    if (action.type === 'run') { 

    state = action.running 

    } 

    return state; 

}; 

const reducers = combineReducers({ 

    greetState: greetReducer, 
    runState: runReducer 

}); 

const store = createStore(reducers); 

store.dispatch({ 

    type: 'greet', 
    greeting: 'Hello' 

}); 

console.log(store.getState()); 

store.dispatch({ 

    type: 'run', 
    running: 'Running like the wind' 

}); 

const App = (props) => <h1>{props.greeting}</h1>; 

const mapStateToProps = function(store) { 
    return { 
    greeting: store.getState().greetState 
    }; 
} 

connect(mapStateToProps)(App); 

ReactDOM.render(
    <Provider store={store}><App /></Provider>, 
    document.getElementById('root') 
);

來源

2017-02-09 Happy Koala

的connect功能（或者，更確切地說，通過connect返回的功能）不修改您的組件;它會返回一個新組件，您需要將其保存到變量中：

const ConnectedApp = connect(mapStateToProps)(App); 

ReactDOM.render(
    <Provider store={store}><ConnectedApp /></Provider>, 
    document.getElementById('root') 
);

來源

2017-02-09 17:26:57

謝謝！這就像一個魅力。對於任何可能檢查這個問題的人來說，我犯的另一個錯誤是輸入store.getState（）。greetState - 它應該只是store.greetState –

@HappyKoala：爲了澄清，mapState的第一個參數是_not_ store對象本身。它實際上是商店中的_state_對象。雖然變量名稱本身並不重要，但「正確的」名稱應該是「狀態」，因此該示例應該是「state.greetState」。 – markerikson

@markerikson謝謝，這進一步澄清。如果只有這個世界是一個JavaScript應用程序，並且Dan Abramov是它的架構師，那就是我所能說的。 Redux應該讓我的倒黴的React應用程序比現在更加快樂。 –

Redux未連接到React組件

回答

相關問題