Question

我正在尝试更新我的商店，但它没有自动更新。

没有使用调度功能，不调用MapActionToProps更新商店。

请帮助。这是什么，我在这里做错了。

这是我的App.js文件：

import React, { Component } from 'react';

    import logo from './logo.svg';
    import './App.css';
    import  { connect} from 'react-redux';
    import { updateUser } from './actions/users-actions';

    class App extends Component {
      constructor(props){
          super(props);
          this.onUpdateUser = this.onUpdateUser.bind(this);
      }
      onUpdateUser(){
          this.props.onUpdateUser('Sammy');
      }
      render() {
        console.log(this.props);
        return (

          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React</h1>
            </header>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
            <button onClick={this.onUpdateUser}> Update User</button>
            {this.props.user} 
          </div>
        );
      }
    }
    const mapStateToProps = state => ({
        products : state.products,
        user : state.user,
    })

    const mapActionsToProps =  {
               onUpdateUser : updateUser
    };  

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

这是我的Action File：

export const UPDATE_USER = 'users:updateUser';
export function updateUser(newUser){
        return{
               type:UPDATE_USER,
               payload:{
                    user:newUser
               }
        }
}

这是我的Reducer File：

import { UPDATE_USER } from '../actions/users-actions';
export default function usersReducer(state='',type,payload){

    switch(type){
            case 'UPDATE_USER':
                return payload.user;
            default:
            return state

    }

}

我是否需要拨打store.dispatch()方法？

Answer 1

如果不调用Component中的dispatch函数，你真的无法做你想做的事。在您的情况下，当您尝试获取state并在同一时间从组件上的Redux中创建dispatch时，您需要直接从{{1}调用dispatch在下一个方式：

mapActionsToProps

这对你有用。

您还需要更新const mapActionsToProps = dispatch => ({ onUpdateUser: (yourData) => dispatch(updateUser(yourData)); });：

Action

export const UPDATE_USER = 'users:updateUser'; export function updateUser(newUser) { return { type: UPDATE_USER, newUser } }也是：

Reducer

Answer 2

reducer中的类型与动作创建者调度的类型不匹配。您的操作有类型：＆＃39;用户：updateUser＆＃39;而减速器正在处理案件＆＃39; UPDATE_USER＆＃39;。

您可以发送＆＃39; UPDATE_USER＆＃39;作为你在动作创建者中的类型，它应该工作。

Answer 3

您是否为商店提供了适当的减速路径？

const store = createStore(
        reducer,
        composeWithDevTools(
            applyMiddleware(sagaMiddleware)
        )
    );

在这里，您应该通过指定reducer文件的正确路径来导入'reducer'。

此外，您可能错过了将您的应用React UI容器包装在react-redux库的提供程序中。

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

Answer 4

我在动作文件

中使用UPDATE_USER解决了这个问题

这是'user：updateuser'

MapActionToProps未更新商店

4 个答案: