我正在用React做一个项目，遇到了一个让我难住的问题。

当我运行yarn start时，我得到这个错误:

TypeError [ERR_INVALID_ARG_TYPE]: "path"参数必须是类型 字符串。接收类型未定义

我不知道为什么会这样。

React 16.3.0已经发布，Context API不再是实验特性。Dan Abramov (Redux的创造者)对此写了一篇很好的评论，但当时Context还只是一个实验性功能。

我的问题是，在你的观点/经验中，我什么时候应该使用React Context而不是React Redux，反之亦然?

当我试图访问react组件中的存储时，@connect工作得很好。但我该如何在其他代码中访问它呢。例如:让我们说我想使用授权令牌来创建我的axios实例，可以在我的应用程序中全局使用，实现这一点的最佳方法是什么?

这是我的api。js

// tooling modules
import axios from 'axios'

// configuration
const api = axios.create()
api.defaults.baseURL = 'http://localhost:5001/api/v1'
api.defaults.headers.common['Authorization'] = 'AUTH_TOKEN' // need the token here
api.defaults.headers.post['Content-Type'] = 'application/json'

export default api

现在我想从我的商店访问一个数据点，这是什么样子，如果我试图在一个react组件中使用@connect获取它

// connect to store
@connect((store) => {
  return {
    auth: store.auth
  }
})
export default class App extends Component {
  componentWillMount() {
    // this is how I would get it in my react component
    console.log(this.props.auth.tokens.authorization_token) 
  }
  render() {...}
}

有什么见解或工作流模式吗?

假设我有以下内容:

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return {
    type: SOME_ACTION,
  }
}

在那个动作创建器中，我想访问全局存储状态(所有还原器)。这样做更好吗:

import store from '../store';

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return {
    type: SOME_ACTION,
    items: store.getState().otherReducer.items,
  }
}

或:

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return (dispatch, getState) => {
    const {items} = getState().otherReducer;

    dispatch(anotherAction(items));
  }
}

是否有系统的方法来调试导致组件在React中重新呈现的原因?我放了一个简单的console.log()来查看它呈现了多少时间，但我很难弄清楚是什么原因导致组件呈现多次，即(4次)在我的情况下。是否有一个工具可以显示时间轴和/或所有组件树的渲染和顺序?

在花了一些时间学习React之后，我明白了创建组件的两种主要范式之间的区别。

我的问题是什么时候应该使用哪个，为什么?其中一种与另一种相比有什么好处/权衡?

---

ES6签署:

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

---

功能:

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

我认为函数是指没有状态可以被那个组件操纵的情况，但真的是这样吗?

我想，如果我使用任何生命周期方法，最好使用基于类的组件。

我正在阅读Redux库的文档，它有这样的例子:

除了读取状态外，容器组件还可以分派动作。以类似的方式，您可以定义一个名为mapDispatchToProps()的函数，该函数接收dispatch()方法并返回您希望注入到表示组件中的回调道具。

这实际上毫无意义。为什么你需要mapDispatchToProps当你已经有mapStateToProps?

它们还提供了以下方便的代码示例:

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

这个函数是什么?为什么它有用?

现在有很多人在谈论redux城的最新成员，redux-saga/redux-saga。它使用生成器函数来监听/分派动作。

在我把我的脑袋绕在它周围之前，我想知道使用redux-saga的优点/缺点，而不是下面的方法，我使用redux-thunk与async/await。

组件可能是这样的，像往常一样分派动作。

import { login } from 'redux/auth';

class LoginForm extends Component {

  onClick(e) {
    e.preventDefault();
    const { user, pass } = this.refs;
    this.props.dispatch(login(user.value, pass.value));
  }

  render() {
    return (<div>
        <input type="text" ref="user" />
        <input type="password" ref="pass" />
        <button onClick={::this.onClick}>Sign In</button>
    </div>);
  } 
}

export default connect((state) => ({}))(LoginForm);

然后我的动作看起来像这样:

// auth.js

import request from 'axios';
import { loadUserData } from './user';

// define constants
// define initial state
// export default reducer

export const login = (user, pass) => async (dispatch) => {
    try {
        dispatch({ type: LOGIN_REQUEST });
        let { data } = await request.post('/login', { user, pass });
        await dispatch(loadUserData(data.uid));
        dispatch({ type: LOGIN_SUCCESS, data });
    } catch(error) {
        dispatch({ type: LOGIN_ERROR, error });
    }
}

// more actions...

---

// user.js

import request from 'axios';

// define constants
// define initial state
// export default reducer

export const loadUserData = (uid) => async (dispatch) => {
    try {
        dispatch({ type: USERDATA_REQUEST });
        let { data } = await request.get(`/users/${uid}`);
        dispatch({ type: USERDATA_SUCCESS, data });
    } catch(error) {
        dispatch({ type: USERDATA_ERROR, error });
    }
}

// more actions...

我正在使用Redux进行状态管理。 如何将存储重置为初始状态?

例如，假设我有两个用户帐户(u1和u2)。 想象下面的一系列事件:

用户u1登录到应用程序并做了一些事情，所以我们在存储中缓存一些数据。 用户u1退出。 用户u2无需刷新浏览器即可登录应用。

此时，缓存的数据将与u1关联，我想清理它。

当第一个用户注销时，如何将Redux存储重置为初始状态?

根据文档，“没有中间件，Redux商店只支持同步数据流”。我不明白为什么会这样。为什么容器组件不能调用异步API，然后分派操作？

例如，想象一个简单的UI：一个字段和一个按钮。当用户按下按钮时，该字段将填充来自远程服务器的数据。

import * as React from 'react';
import * as Redux from 'redux';
import { Provider, connect } from 'react-redux';

const ActionTypes = {
    STARTED_UPDATING: 'STARTED_UPDATING',
    UPDATED: 'UPDATED'
};

class AsyncApi {
    static getFieldValue() {
        const promise = new Promise((resolve) => {
            setTimeout(() => {
                resolve(Math.floor(Math.random() * 100));
            }, 1000);
        });
        return promise;
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                <input value={this.props.field}/>
                <button disabled={this.props.isWaiting} onClick={this.props.update}>Fetch</button>
                {this.props.isWaiting && <div>Waiting...</div>}
            </div>
        );
    }
}
App.propTypes = {
    dispatch: React.PropTypes.func,
    field: React.PropTypes.any,
    isWaiting: React.PropTypes.bool
};

const reducer = (state = { field: 'No data', isWaiting: false }, action) => {
    switch (action.type) {
        case ActionTypes.STARTED_UPDATING:
            return { ...state, isWaiting: true };
        case ActionTypes.UPDATED:
            return { ...state, isWaiting: false, field: action.payload };
        default:
            return state;
    }
};
const store = Redux.createStore(reducer);
const ConnectedApp = connect(
    (state) => {
        return { ...state };
    },
    (dispatch) => {
        return {
            update: () => {
                dispatch({
                    type: ActionTypes.STARTED_UPDATING
                });
                AsyncApi.getFieldValue()
                    .then(result => dispatch({
                        type: ActionTypes.UPDATED,
                        payload: result
                    }));
            }
        };
    })(App);
export default class extends React.Component {
    render() {
        return <Provider store={store}><ConnectedApp/></Provider>;
    }
}

渲染导出的组件时，我可以单击该按钮，输入将正确更新。

注意connect调用中的update函数。它发送一个动作，告诉应用程序它正在更新，然后执行一个异步调用。调用完成后，所提供的值将作为另一个操作的有效负载进行调度。

这种方法有什么问题？为什么我要使用Redux Thunk或Redux Promise，如文档所示？

编辑：我在Redux repo中搜索线索，发现Action Creator在过去被要求是纯函数。例如，这里有一个用户试图为异步数据流提供更好的解释：

动作创建者本身仍然是一个纯函数，但它返回的thunk函数不需要是纯函数，它可以执行我们的异步调用

动作创作者不再需要纯粹。因此，thunk/promise中间件在过去肯定是必需的，但现在似乎不再是这样了？