标签: redux

我已经阅读了这个答案,减少了样板,看了几个GitHub示例,甚至尝试了redux(todo apps).

据我了解,官方redux doc动机提供了与传统MVC架构相比的优点.但它没有提供问题的答案:

为什么你应该使用Redux而不是Facebook Flux？

这只是编程风格的问题:功能与非功能？或者问题是在redux方法中遵循的能力/开发工具？也许缩放？还是测试？

如果我说redux对于来自函数式语言的人来说是一种变化,我是对的吗？

要回答这个问题,您可以比较实施redux在flux和redux上的动机点的复杂性.

以下是官方redux doc动机的动机点:

1. 处理乐观的更新(据我所知,它几乎不取决于第5点.难道在facebook flux中实现它吗？)
2. 在服务器上渲染(facebook flux也可以做到这一点.与redux相比有什么好处？)
3. 在执行路由转换之前获取数据(为什么在facebook中无法实现？有什么好处？)
4. 热重载(可以使用React Hot Reload.为什么我们需要redux？)
5. 撤消/重做功能
6. 还有其他一点吗？像坚持国家一样......

我有一个更新我的应用程序的通知状态的操作.通常,此通知将是某种错误或信息.我需要在5秒后发送另一个操作,将通知状态返回到初始状态,因此不会发出通知.这背后的主要原因是提供通知在5秒后自动消失的功能.

我没有运气使用setTimeout和返回另一个动作,也无法找到如何在线完成.所以欢迎任何建议.

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

例如,想象一个简单的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>
        ); …

现在有很多关于redux镇最新孩子的讨论,redux-saga/redux-saga.它使用生成器函数来监听/调度操作.

在我绕过它之前,我想知道redux-saga使用redux-thunkasync/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 …

我正在使用Redux进行状态管理.
如何将商店重置为初始状态？

例如,假设我有两个用户帐户(u1和u2).
想象一下以下一系列事件:

1. 用户u1登录应用程序并执行某些操作,因此我们会在商店中缓存一些数据.

2. 用户u1注销.

3. 用户u2无需刷新浏览器即可登录应用程序.

此时,缓存的数据将与之关联u1,我想将其清理干净.

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

我正在阅读Redux库的文档,它有这个例子,

除了读取状态之外,容器组件还可以调度操作.以类似的方式,您可以定义一个调用的函数mapDispatchToProps(),该函数接收dispatch()方法并返回您想要注入到表示组件中的回调道具.

这实际上没有任何意义.dispatch()你已经拥有了为什么需要mapDispatchToProps？

他们还提供了这个方便的代码示例:

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

有人可以用非专业人士的术语解释这个功能是什么以及为什么它有用？

说我有以下内容:

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

在该动作创建者中,我想访问全局存储状态(所有reducers).这样做更好:

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 中处理一个项目，但遇到了一个让我难倒的问题。

每当我运行时，yarn start我都会收到此错误：

类型错误 [ERR_INVALID_ARG_TYPE]：“路径”参数必须是字符串类型。接收类型未定义

我不知道为什么会发生这种情况，如果有人遇到过这种情况，我将不胜感激。

我刚刚发现了Redux.一切看起来都不错.使用Redux over Flux是否有任何缺点,陷阱或妥协？谢谢

我正在构建一个需要在某些情况下显示确认对话框的应用程序.

假设我想删除一些东西,然后我会调度一个动作,deleteSomething(id)因此一些reducer会捕获该事件并填充对话框减速器以显示它.

当这个对话提交时,我怀疑了.

• 该组件如何根据调度的第一个操作调度正确的操作？
• 动作创建者应该处理这个逻辑吗？
• 我们可以在减速机内添加动作吗？

编辑:

使它更清楚:

deleteThingA(id) => show dialog with Questions => deleteThingARemotely(id)

createThingB(id) => Show dialog with Questions => createThingBRemotely(id)

所以我正在尝试重用对话框组件.显示/隐藏对话框不是问题,因为这可以在reducer中轻松完成.我想要指定的是如何根据左侧开始流动的动作从右侧调度动作.