Question

我是新手反应redux，并尝试使用mock-api调用（https://github.com/DerekCuevas/friend-list/blob/master/redux-saga-solution/api/index.js）进行frineds搜索功能。

在这个项目中，我只是陷入困境时，在还原状态更新时不会更新道具。当获取操作调度时，状态更新很好。我可以通过redux dev工具看到成功的状态更新，但是在容器上只有错误“”，即使我通过connect方法将容器组件与redux store连接起来。如果你们有一些想法让容器更新道具，我感激不尽。这是我的代码。 https://github.com/gakuakachi/friends-list

容器/主要/ index.js

const mapStateToProps = state => {
  const { isFetching, friends, error } = state.friends;
  return {
    isFetching,
    friends,
    error
  }
}

const mapDispatchToProps = dispatch => {
  return {
    fetchFriendsStart: friends => {
      dispatch(Actions.fetchFriendsStart(friends))
    }
  }
}

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

容器/主要/ reducer.js

import { combineReducers } from 'redux'
import * as ActionType from './constants';
import { fromJS } from 'immutable';
/*
 *
 * Main reducer
 *
 */

const initialState = fromJS({
  isFetching: false,
  query: '',
  friends: [],
  error: ''
});

export default function friendsReducer( state = initialState, action) {
  switch (action.type) {
    case ActionType.FRIENDS_FETCH_START:
      return state.set('isFetching', false);
    case ActionType.FRIENDS_FETCH_SUCCESSED:
      return state.merge({
        isFetching: false,
        friends: action.friends
      });
    case ActionType.FRIENDS_FETCH_FAILED:
      return state.merge({
        isFetching: false,
        error: action.error
      });
    default:
      return state;
  }
}

容器/主要/ sagas.js

import { fork, call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import * as Actions from './actions';
import * as ActionTypes from './constants';

import search from './service/api';

function* helloSaga() {
  console.log('Hello Sagas!');
}

function* fetchFriendsSaga(action) {
  try {
    // console.log("this is withing fetchFriendsSaga" + "   "+ action.param)
    const friends = yield call(search, action.param);
    yield put({type: ActionTypes.FRIENDS_FETCH_SUCCESSED, friends: friends });
  }catch(e) {
    yield put({type: ActionTypes.FRIENDS_FETCH_FAILED, error: e.message});
  }
}

function* fetchFriendsWatherSaga() {
  yield takeEvery(ActionTypes.FRIENDS_FETCH_START, fetchFriendsSaga);
}

function* rootSaga() {
  yield [
    fork(helloSaga),
    fork(fetchFriendsWatherSaga)
  ];
}

export default rootSaga;

容器/主要/ actions.js

import fetch from 'isomorphic-fetch'
import { Api } from './service/api';
import * as ActionType from './constants';

export function fetchFriendsStart(param) {
  return {
    type: ActionType.FRIENDS_FETCH_START,
    param
  }
}


export const receiveFriends = friends => {
  return {
    type: ActionType.FRIENDS_FETCH_SUCCESSED,
    friends
  }
}

export const friendsFetchFailed = error => {
  return {
    type: ActionType.FRIENDS_FETCH_FAILED,
    error
  }
}

当状态发生时，容器中的react-redux props不会更新

0 个答案: