Question

我遇到这个问题，我无法在嵌套组件中访问我的redux函数，我认为问题与react-router有关。

这是我的index.js：

const store = createStore(UserReducer);

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

这是我的app.js：

class App extends Component {

  static propTypes: {
    user: {
      id: PropTypes.string.isRequired,
      token: PropTypes.string.isRequired
    }
  };

  handleInput = (evt) =>
  this.setState({ user: { ...this.state.user, [evt.target.name]: evt.target.value} });

  render() {

    const { dispatch, id, token } = this.props;
    const addUser = bindActionCreators(UserActionCreators.addUser, dispatch);

    return (
      <BrowserRouter>
        <div className="App">
          <Navbar />
          <br/>
          <br/>
          <br/>
          <Switch>
            <Route exact path="/" render={() => (
                <Landing/>
              )}/>
              <Route path="/sign_in" render={() => (
                  <LogIn handleInput={this.handleInput} addUser={addUser}/>
                )} />
                <Route path="/sign_up" render={() => (
                    <SignUp/>
                  )} />
                  <Route path="/users" render={({match}) => (
                      <Users user={this.state.user} match={match} {...this.props} />
                    )} />
                  </Switch>
                  <Footer />
                </div>
              </BrowserRouter>
            );
          }
        }
        const mapStateToProps = state => (
          {
            id: state.id,


      token: state.token
      }
    );

    export default connect(mapStateToProps)(App);

我试图将我的addUser函数传递给Login组件但是在我尝试调用函数的那一刻它会告诉我我的函数没有定义。

此外，我在登录组件的末尾有这个代码，这是一个类。

LogIn.propTypes = {
    addUser: PropTypes.func.isRequired
  }


  export default withRouter(LogIn);

以下是我的UserActionCreators.addUser的样子：

export const addUser = (id, token) => {
  return{
    type: UserActionTypes.ADD_USER,
    id,
    token
  };
};


export const ADD_USER = 'user/ADD_USER';

Answer 1

const mapDispatchToProps = dispatch => {
    return {
      addUser: () => dispatch(userActionCreators.addUser())
    }
}

在mapStateToProps之后添加此代码，并将导出修改为

export default connect(mapStateToProps, mapDispatchToProps)(App);

现在，您可以在代码中的任何位置通过this.props.addUser访问addUser。

React-Router和Redux不能一起工作

1 个答案: