Question

Redux新手在这里所以我有这个代码调度异步操作，它使用promise来处理请求

所以这里是mapDispatchToProps

＆＃13;

const mapDispatchToProps = (dispatch) => {
    return {
      fetchUserList: () => {
        console.log('---In fetchUserList---');
        dispatch({
          type: FETCH_USER_LIST,
          payload: new Promise((resolve, reject) => {
            let xhr = new XMLHttpRequest();
            console.log('xhr: ', xhr);
            xhr.open('GET', 'http://localhost:5000/data/fetch/users');

            xhr.onload = () => {
              console.log(' --- in onload function ---');
              console.log(xhr.responseText);
              resolve(JSON.parse(xhr.responseText));
            }
            xhr.onerror = () => {
              console.log(' --- in onerror function ---');
              reject(xhr.statusText);
            }
            xhr.send();
          })
        });
      }

＆＃13;

它的作用是从服务器获取json对象数组，以获取映射到

mapStateToProps

＆＃13;

const mapStateToProps = (state) => {

  return {
    userlist: state.list_reducer,
  };
};

＆＃13;

现在这是我上面使用的组件：

＆＃13;

class Profile extends Component {

  constructor(props) {
    super(props);
    this.state = {
      listRender: false
    };
  }

  render() {
    console.log('In render: ');
    console.log(this.props.userlist);
    return (
      // basic list rendering template
    );
  }
  componentDidMount() {

    this.props.fetchUserList();
    this.setState({
      listRender: true
    });
  }

＆＃13;

现在可以从上面看到我在fetchUserList()中使用componentDidMount()从服务器获取数据并且数据会发送到reducer

以下是list_reducer.js：

＆＃13;

export default function list_reducer(state = {
  operation: '',
  userlist: []
}, action) {

  switch (action.type) {
    case "FETCH_USER_FULFILLED":
      console.log("FETCH_USER_FULFILLED");
      console.log(action.payload);
      return {
        operation: 'success',
        userlist: action.payload
      }


    case "UPDATE_USER_DETAILS_FULFILLED":
      return {
        operation: 'success',
        userlist: action.payload
      }


    case "DELETE_USER_FULFILLED":
      return {
        operation: 'success',
        userlist: action.payload
      }


    case "REGISTER_USER_FULFILLED":
      return {
        operation: 'success',
        //userlist: 
      }

    default:
      return { ...state
      }
  }

};

＆＃13;

现在，不是接收新获取的用户列表，而是获取在this.props.userlist（mapStateToProps）

中传递给reducer的默认数据

所以问题是如何新获取的列表而不是默认状态数据，它被赋予 reducer 。< / p>

Answer 1

使用Redux进行异步调用时，我使用Thunks

默认情况下，Redux操作创建程序不支持异步操作比如获取数据，所以我们在这里使用Redux Thunk。咚允许您编写返回函数的动作创建者而不是一种行为。内部函数可以接收存储方法调度和getState作为参数。

因此，如果您想进行API调用，我们的操作将如下所示。

Actions.js（或等效的）

import axios from "axios";

export const receiveUserLift = json = {
  return {
    type: "RECEIVE_USERS",
    payload: json
  }
}

export function fetchUserList() {
  return dispatch => {
    return axios
      .get('http://localhost:5000/data/fetch/users')
      .then(response => {
        dispatch(receiveUserLift(response))
      })
      .catch(error => console.log("FetchUserList Axios Error", error))

  }
}

Reducer 将包含以下内容

case "RECEIVE_USERS":
  return Object.assign({}, currentState, {
    userList: action.payload
  });

组件将包含以下内容

import { fetchUserList } from "WHERE WE DECLARED OUR ARE ACTION";

 class Example extends React.Component {
  componentDidMount() {
    // You could use it anywhere, but this is how you would call the action
    this.props.fetch()
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.users === prevState.users) return null;
    return {
      users: nextProps.users
    };
  }
}


const mapStateToProps = (state, ownProps) => {
  return {
    users: state.userList
  };
};

const mapDispatchToProps = (dispatch, ownProps) => ({
  fetch: () => dispatch(fetchUserList())
});

<强>旁注

异步接收组件中的数据要求我们使用组件生命周期方法。您会在互联网上看到很多指南，建议您使用componentWillReceiveProps来执行此操作，但在将来的React版本中将删除此内容并替换为static getDerivedStateFromProps您可以阅读更多相关信息{{1} 3}}

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.users === prevState.users) return null;

    return {
            users: nextProps.users
    };
  }

以上代码可作为粗略指南，但这是我在处理异步API调用和使用Redux进行渲染时所遵循的一般模式

如何使用异步操作从reducer中恢复数据

1 个答案: