Question

我遇到问题将我的动作创建者分派给this.props。我没有从dispatchToProps或stateToProps获得任何道具。我在挠头。有人可以向我解释为什么我没有得到任何道具吗？

store.js

import { applyMiddleware, createStore, combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import thunk from 'redux-thunk';
import signUpReducer from '../reducers';

let store;

export default {
  initialize: () => {
    const reducers = combineReducers({
      form: formReducer,
      signup: signUpReducer,
    });

    store = createStore(
      reducers,
      window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
      applyMiddleware(thunk),
    );
    return store;
  },
  currentStore: () => {
    return store;
  },
};

app.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import 'bootstrap/scss/bootstrap.scss';
import 'normalize.css/normalize.css';
import Main from './components/layout';
import './styles/styles.scss';
import store from './stores';

class App extends Component {
  render() {
    return (
      <Provider store={store.initialize()}>
        <div>
          <Main />
        </div>
      </Provider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

reducers.js

import constants from '../constants';

const initialState = {
  user: null,
};

const signUpReducer = (state = initialState, action) => {
  let updated = Object.assign({}, state);
  switch (action.type) {
    case constants.SIGN_USER_UP:
      console.log('-------');
      console.log(action.user);
      console.log(updated);
      return updated;
    default:
      return state;
  }
};

export default signUpReducer;

SignUp.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Modal from 'react-modal';
import SignupForm from './SignupForm';
import { signUserUp } from '../../actions';

import store from '../../stores';

Modal.setAppElement('#app');

const customStyles = {
  content: {
    margin: 'auto',
    width: '85%',
    marginTop: '50px',
    overflow: 'none',
    padding: '0px',
    border: 'none',
  },
};

class SignUp extends Component {
  onSubmit = (user) => {
    //console.log(this.props.signUserUp(user));
    store.initialize().dispatch(signUserUp(user))
  }
  render() {
    return (
      <Modal
        isOpen={this.props.isOpen}
        style={customStyles}
        contentLabel="Modal"
        shouldCloseOnOverlayClick={this.props.shouldCloseOnOverlayClick}
        onRequestClose={this.props.closeModal}
      >
        <SignupForm
          closeModal={this.props.closeModal}
          onSubmit={this.onSubmit}
        />
      </Modal>
    );
  }
}

SignUp.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  shouldCloseOnOverlayClick: PropTypes.bool.isRequired,
  closeModal: PropTypes.func.isRequired,
  signUserUp: PropTypes.func.isRequired,
};

const dispatchToProps = (dispatch) => {
  return {
    signUserUp: (user) => dispatch(signUserUp(user)),
  };
};

connect(null, dispatchToProps)(SignUp);

export default SignUp;

所以我的signUserup未定义，当我添加StateToProps时，我也得到了未定义。但是当我使用store.initialize（）。dispatch（signUserUp（user））时它击中了reducer.js。

反应redux dispatchToProps不调度到道具

0 个答案: