MapActionToProps не обновляет магазин - PullRequest
Новая
       7

MapActionToProps не обновляет магазин

0 голосов
/ 01 мая 2018

Я пытаюсь обновить мой Магазин, но он не обновляется автоматически.

Не вызывает 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() метод?

Ответы [ 4 ]

0 голосов
/ 01 мая 2018

Я решил, используя UPDATE_USER в файле действий,

где это было 'user: updateuser'

0 голосов
/ 01 мая 2018

Вы действительно не можете делать то, что хотите, не вызывая функцию dispatch в вашем Компоненте. В вашем случае, когда вы пытаетесь получить state и одновременно сделать dispatch из Redux на Компоненте - вам нужно вызвать 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 тоже: 

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

    switch(action.type){
       case 'UPDATE_USER':
          return action.newUser;
       default:
          return state
    }
}
0 голосов
/ 01 мая 2018

Вы указали правильный путь редуктора к вашему магазину? 

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

Здесь вы должны импортировать 'Reducer', указав правильный путь к вашему файлу редуктора.

Кроме того, возможно, вы пропустили обертку контейнера React UI вашего приложения в провайдере реагирующей библиотеки. 

ReactDOM.render(  
  <Provider store={ store }>
    <App />
  </Provider>,
  document.getElementById('app')
);
0 голосов
/ 01 мая 2018

Тип в редукторе не соответствует тому, что отправляет создатель действия. Ваше действие имеет тип: 'users: updateUser', тогда как редуктор обрабатывает случай 'UPDATE_USER'.

Вы можете отправить 'UPDATE_USER' как ваш тип в создателе действий, и он должен работать.

...