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