Как использовать Thunk в реагировать на родной? - PullRequest
Новая
       8

Как использовать Thunk в реагировать на родной?

0 голосов
/ 08 февраля 2020

Я изучаю избыточность,

Я просто хочу имитировать получение данных с сервера, поэтому для обработки я использую setTimeout(),

, но есть ошибка

Ошибка: действия должны быть простыми объектами. Используйте пользовательское промежуточное программное обеспечение для асинхронных действий.

, хотя я устанавливаю redux-thunk, это не решает его!

здесь код

. / Actions / userActions . js

const setName = name => {
  return dispatch => {
    setTimeout(() => {
      dispatch({
        type: 'SET_NAME',
        payload: name,
      });
    }, 2000);
  };
};

const setAge = age => {
  return {
    type: 'SET_AGE',
    payload: age,
  };
};

export {setName, setAge};

. / Редукторы / userReducers. js

const userReducer = (
  state = {
    name: 'Max',
    age: 27,
  },
  action,
) => {
  switch (action.type) {
    case 'SET_NAME':
      state = {
        ...state,
        name: action.payload,
      };
      break;
    case 'SET_AGE':
      state = {
        ...state,
        age: action.payload,
      };
      break;
  }
  return state;
};

export default userReducer;

. / Store. js 

import {applyMiddleware, combineReducers, compose, createStore} from 'redux';
import thunk from 'redux-thunk';
import mathReducer from '../reducers/mathReducer';
import userReducer from '../reducers/userReducer';

const store = createStore(
  combineReducers(
    {math: mathReducer, user: userReducer},
    // applyMiddleware(thunk) not work :]
    compose(applyMiddleware(thunk)), //same :]
  ),
);

export default store;

Приложение. js

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Main changeUsername={() => this.props.setName('Oliver')} />
        <User username={this.props.user.name} />
      </View>
    );
  }
}



const mapStateToProps = state => {
  return {
    user: state.user, //user is a key == userReducer
    math: state.math,
  };
};

const mapDispatchToProps = dispatch => {
  // to excute the actions we want to invok
  return {
    setName: name => {
      dispatch(setName(name));
    },
  };
};

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

1 Ответ

2 голосов
/ 08 февраля 2020

Вы передаете applyMiddleware(thunk) в качестве аргумента combReducers, его следует передать как второй аргумент createStore. 

const store = createStore(
  combineReducers({math: mathReducer, user: userReducer}),
  applyMiddleware(thunk)
);
...