Question

我的异步操作有问题。我想设置＆＃39; loading＆＃39;调用动作fetchPosts（）并加载＆＃39;当action fetchPostsSuccess（）或fetchPostsFailiure（）时，state变为false。

使用我当前的代码，除了“loading＆＃39;当fetchPosts（）从服务器接收响应时状态改变，我想在请求开始时改变这种状态。

这是显示我的步骤的简单代码。我使用了axios和redux-promise（https://github.com/acdlite/redux-promise）。

// actions
export function fetchPosts() {
  const request = axios.get(`${API_URL}/posts/`);
  return {
    type: 'FETCH_POSTS',
    payload: request,
  };
}

export function fetchPostsSuccess(posts) {
  return {
    type: 'FETCH_POSTS_SUCCESS',
    payload: posts,
  };
}

export function fetchPostsFailure(error) {
  return {
    type: 'FETCH_POSTS_FAILURE',
    payload: error,
  };
}


// reducer
const INITIAL_STATE = {
  posts: [],
  loading: false,
  error: null,
}
const postsReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case 'FETCH_POSTS':
      return { ...state, loading: true, error: null };
    case 'FETCH_POSTS_SUCCESS':
      return { ...state, posts: action.payload, loading: false };
    case 'FETCH_POSTS_FAILURE':
      return { ...state, posts: [], loading: false, error: action.payload };
    default:
      return state;
  }
}

const rootReducer = combineReducers({
  postsList: postsReducer,
});


// store
function configureStore(initialState) {
  return createStore(
    rootReducer,
    applyMiddleware(
      promise,
    ),
  );
}
const store = configureStore();


// simple Posts app
class Posts extends Component {
  componentWillMount() {
    this.props.fetchPosts();
  }

  render() {
    const { posts, loading } = this.props.postsList;
    return (
      <div>
        {loading && <p>Loading...</p>}
        <ul>
          {posts.map(post => <li key={post.id}>{post.title}</li>)}
        </ul>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  postsList: state.postsList,
});

const mapDispatchToProps = dispatch => ({
  fetchPosts: (params = {}) => {
    dispatch(fetchPosts())
      .then((response) => {
        if (!response.error) {
          dispatch(fetchPostsSuccess(response.payload.data));
        } else {
          dispatch(fetchPostsFailure(response.payload.data));
        }
      });
  },
});


const PostsContainer = connect(mapStateToProps, mapDispatchToProps)(Posts);

// main
ReactDOM.render((
  <Provider store={store}>
    <Router history={browserHistory}>
      <Route path="posts" component={PostsContainer} />
    </Router>
  </Provider>
), document.getElementById('appRoot'));

有人可以指导我做错了什么吗？

Answer 1

事实证明问题在于'redux-promise'包。这个异步中间件没有“待定”状态的承诺（称为“乐观更新”）。

只有在承诺得到解决或拒绝后才会更改状态。

我应该使用不同的中间件来实现'乐观更新'

Answer 2

您的问题与redux-promise有关。您应该使用redux-thunk代替，它允许您返回一个函数并多次发送。看看吧;）！

请求完成后触发Redux异步操作。为什么？

2 个答案: