标签: react-redux

我正在研究React&Redux项目.该项目过去常常使用webpack-dev-middleware和热中间件进行热重装.

在我将Redux Saga添加到项目中之后,将一些saga中间件添加到redux商店.似乎每当我更改传奇代码时,热重新加载都会破坏并显示错误消息:

提供商>不支持动态更改store.您很可能会看到此错误,因为您已更新到Redux 2.x和React Redux 2.x,它们不再自动热重新加载Reducer.有关迁移说明,请参阅https://github.com/reactjs/react-redux/releases/tag/v2.0.0.

我知道佐贺使用发电机并且它是时间依赖的.可以用Sagas热重新加载页面吗？就像Redux减速器在热重装过程中如何替换自身一样.

谢谢!

我坚持这一点,我无法进步 - 我想解决方案很简单,但我无法弄清楚.我正在尝试在reducer中添加条目,因此in in中的数据看起来像这样:

state = {
  entryId: {
    entryName: ["something", "something2", "something3" /* and so on... */]
  }
};

到目前为止,这是我得到的最接近的,但是,它不是添加新的唯一条目,而是替换已经存储的条目.此外,我需要能够将此项添加到空状态,其中entryId,entryName尚不存在以避免错误:

switch(type) {
  case ADD_ENTRY:
    return {
      ...state,
      [entryId]: {
        ...state[entryId],
        [entryName]: {
          [uniqueEntry]: true
        }
      }
    };
}

知道我做错了什么吗？

我在componentDidMount中有 React 组件从服务器获取数据。问题是componentDidMount被调用了两次，API 也被调用了两次。我有一个视图增量 API，例如 YouTube 视频视图，由于两次 API 调用，在数据库中增量两次。

class SingleVideoPlay extends React.Component {
    constructor(props) {
        super(props);
        this.player = React.createRef();
    }
    state = {
        autoPlay: true,
        relatedVideos: [],
        video: null,
        user: null,
        comments: [],
        commentInput: {
            value: '',
            touch: false,
            error: false
        },
        following: false,
        tab: 'comments'
    };
    _Mounted = false;

    componentDidMount() {
        this._Mounted = true;
        if (this._Mounted) {
            const videoId = this.props.match.params.id;
            this.getVideoDetails(videoId);
        }
    }
    componentWillUnmount() {
        this._Mounted = false;
        try {
            clearInterval(this.state.videoInterval);
            this.props.videoEditUrl('');
        } catch …

我正在尝试在我们当前的应用程序中实现无限滚动功能；

我们首先获取页面的前 5 个“帖子”。滚动到页面底部后，我们会获取接下来的 5 篇帖子。

这很好用，但是使用相同的查询意味着现有数据（前 5 个帖子）已被新数据替换。

是否可以将现有数据与新数据合并？

我可以将它们合并到位，例如使用类似的内容；const posts = [newPosts, oldPosts]但如果现有数据被修改，我们就会失去 RTK 查询提供的数据失效。

对于这种情况，推荐的方法是什么？

我试图测试我的React组件并得到以下错误.

不变违规:无法在"连接()"的上下文或道具中找到"存储".将根组件包装在<Provider>中,或者显式地将"store"作为prop传递给"Connect()".

在测试中渲染Component时出错.

beforeEach(() => {
  Component = TestUtils.renderIntoDocument(<SideMenu />);
});

在页面上呈现Component时,它工作正常.但是在测试中,我无法将存储明确地传递给Component.

有人能指出正确的方向吗？

我想知道我的应用程序需要多长时间才能让用户"准备好"与之交互.应用加载的时间表包括以下内容:

1. DOM加载.
2. 初始反应渲染.
3. 从各种componentDidMount()s 触发的HTTP调用
4. HTTP调用返回.使用HTTP响应更新Redux状态.
5. 使用HTTP响应中的新值进行React渲染.
6. 所有初始加载完成.用户已准备好与应用程序进行交互.

在这个过程结束时,我想发一个跟踪事件来记录它的值window.performance.now().

我不确定最好的办法是什么.React的组件系统很好地解耦了UI的各个部分.在这种情况下,不幸的是,它意味着我不会有一个容易检查的地方"知道所有内容都是用新数据渲染的".

我尝试或考虑过的事情:

1. 寻找一个React生命周期钩子,告诉我是否有任何孩子正在更新.有点像componentOrAnyChildDidUpdate().我不认为这存在,它可能与React哲学背道而驰.
2. 将anyChildDidUpdate()生命周期钩子并入context并将我的应用程序中的每个组件都作为辅助抽象基类的子类或者包含在更高阶的组件中.这似乎很糟糕,因为它context是一个实验性API.
3. 通过订阅Redux州store.subscribe().更新Redux状态以显示是否已返回所有HTTP调用.一旦所有的HTTP调用都返回,并且React完成了重新渲染,那么我就知道要触发跟踪回调.问题是知道React何时完成重新渲染.如果我store.subscribe()的回调保证在回调后同步执行,它将起作用react-redux.但事实并非如此.

在React中有一个很好的方法吗？

1- Provider

为什么我们需要将所有组件包装在里面Provider？

2- connect:

如何connect通过redux存储props组件？

3-我们可以建立我们自己的Provider和connect？

下面是刚刚从Redux的商店显示的名称,并使用阵营终极版全工作简单阵营终极版例子connect和Provider,所以怎么ConnectedComponent能简单地访问this.props.name？

import React, { Component } from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import { Provider, connect } from "react-redux";

var defaultState = {
  name: "Amr"
};

function rootReducer(state = defaultState, action) {
  return state;
}

var store = createStore(rootReducer);


class ConnectedComp extends Component {
  render() { …

我有一个react组件,每秒从redux商店接收道具.新状态的数组与最后一个数组不同.具体而言,每秒都会将一个元素添加到数组中.例如:在一个状态中,数组是:

[1,2,3,4,5,6]

下一个州

[1,2,3,4,5,6,7]

我的减速机:

return {
  ...state,
  myList: [ payload, ...state.myList.filter(item => payload.id !== item.id).slice(0, -1) ]
}

现在,在我的react组件中,我订阅了这个状态,每次更改时,都会重新呈现列表.

import React, { Component } from 'react';
import MyRow from './MyRow';

class MyList extends Component {

    render() {

        return (

        <div>

            {this.props.myList.map((list, index) => (
                <MyRow key={list.id} data={list}/>
            ))}

        </div>

        );
    }
}

function select({ myList }) {
    return { myList };
}

export default connect(select)(MyList);

在MyRow.js

import { PureComponent } from 'react';

class MyRow extends PureComponent {

    render() { …

从useEffect钩子内的 Redux 存储中获取状态的正确方法是什么？

    useEffect(() => { 
        const user = useSelector(state => state.user);
    });

我正在尝试获取当前状态，useEffect但我无法使用该useSelector调用，因为这会导致错误说明：

Invariant Violation: Hooks can only be called inside the body of a function component.

我想我明白为什么它打破了钩子的主要规则之一。

通过查看Redux 文档上的示例，他们似乎使用一个selectors.js文件来收集当前状态，但mapStateToProps我理解的这个参考不再需要。

我是否需要创建某种应该在useEffect钩子内调用的“getter”函数？

我有store.js文件

import { createStore, combineReducers } from "redux";
import reducerADD from "../reducer/reducerADD"

export const store = createStore(combineReducers({ reducerADD}));

当我更改格式时store.tsx出现错误：

No overload matches this call.
  Overload 1 of 2, '(reducers: ReducersMapObject<{ reducerADD: { lastName: string; firstName: string; password: string; email: string; }[]; }, any>): Reducer<{ reducerADD: { lastName: string; firstName: string; password: string; email: string; }[]; }, AnyAction>', gave the following error.
    Type '(state: never[] | undefined, action: action) => { lastName: string; firstName: string; password: string; …