Redux 未连接到 React 组件

Question

我一直在玩 Redux，但我似乎无法让它与 React 连接。我正在使用connect 和mapStateToProps，但我商店中的道具没有被传递到我的组件中。也许有人可以解释为什么我的代码不起作用？我猜它与 mapStateToProps 函数有关。

这是我得到的代码：

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')
);

Answer 1

connect 函数（或者，更确切地说，connect 返回的函数）不会修改您的组件；它返回一个新组件，您需要将其保存到变量中：

const ConnectedApp = connect(mapStateToProps)(App);

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