标签: redux

我正在尝试过滤我的数据以显示我的减速器并在第一次渲染中工作。但是，当我尝试使用分页更改页面时出现此错误：

× 重新渲染过多。React 限制渲染次数以防止无限循环 dispatch(GetFilteredData());

当我检查控制台时，我得到了 的无限循环console.log(data2)，但我不知道为什么会这样。

这是我的派遣工作 PaisBody.js

import React, { useState, useEffect } from 'react';
import {useSelector,useDispatch} from 'react-redux';
import TablePagination from 'Layout/Table/TablePagination';
import {InsertPageCount,InsertData,GetFilteredData} from 'Redux/Actions/Pagination';
import GetApi from 'Url/index';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import allReducers from 'Redux/Reducers/Pagination';
import {TableFilter} from 'Layout/Table/TableFilter';



const PaisBody = (props) => {

  const dispatch = useDispatch();
  dispatch(InsertData(props.data));
  dispatch(InsertPageCount(props.data.length));

  dispatch(GetFilteredData());

  const CurrentPage = useSelector(state => state.CurrentPage.page);
  const data2 = useSelector(state => state.CurrentPage.filteredData);

  console.log(data2);



  return (
    <div> …

我正面临 Redux 和 React 的问题

我使用 redux 操作从 API 获取数据。当组件挂载时，会触发此操作并填充 Redux 状态。我希望使用article来自 redux 状态的参数 ( )触发第二个操作。

我的问题是，当我触发第二个动作时，redux 状态仍然为空，因此article为空，这会导致错误。

componentDidMount() {

  const { targetArticle, userVisit, match, article } = this.props

  targetArticle(match.params.slug); 

  userVisit(match.params.slug, article.title);

}

我已经检查了类似主题的其他主题这一个，但没有人对我的作品。我怎样才能做到这一点？

谢谢

我想制作一个电子商务网络应用程序，在后端我使用Django和 Django Rest Framework。我想在前端使用带有 axios 库的React、Redux 和 React-Router。我发现这是 React 的另外两个框架，即Nextjs 和 Gatsby。

现在，哪一个更适合我在Nextjs 和 Gatsby之间制作电子商务网络应用程序？

而且，是否有必要将Redux、React-Router 与 Nextjs 和 Gatsby 一起使用？

嘿伙计们，我在 nextjs 中使用 redux thunk，现在我想在我的应用程序中添加 redux-persist。所以最初我的代码就像

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from './reducers';

export const makeStore = (initialState, options) => {
    return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(thunk)));
};

任何人都可以帮助我只在 redux 的设置中坚持吗？我尝试了一些解决方案但没有解决

所以我有一个从 api 获取的调度，然后它将根据请求的响应代码调度成功或错误操作。成功时，我的操作应该添加到我的 redux 存储中的数组中，错误时它应该什么都不做并返回当前状态。然而，由于某种原因，当获取请求中出现错误时，错误操作确实被调用（我已经使用 redux devtools 检查过）但该操作的行为就像调用了成功操作一样，因此即使使用新值更新数组虽然有错误。知道可能出了什么问题吗？

谢谢

我的行动：

export const ADD_PROJECT_SUCCESS = "ADD_PROJECT_SUCCESS"
export const ADD_PROJECT_ERROR = "ADD_PROJECT_ERROR"

export function addProject( project, projects ) {
    const url = 'project/'
    let tempProjects = projects
    tempProjects.push( project )
    const requestOptions = {
      method: 'POST',
      credentials: 'include',
      body: JSON.stringify( project )
    };
    return (dispatch) => {
      return fetchReq( requestOptions, url ).then( ([response] ) => {
        if( response.status === 201) {
          dispatch( addProjectSuccess(tempProjects) )
        } else {
          dispatch( addProjectError() )
        }
      }) …

如标题所示 - 当我在 React/Redux 应用程序中重新加载页面时，用户正在注销。我将令牌存储在 localStorage 中，但它不起作用，因此可能有任何错误。用户登录时应存储令牌。注销工作正常。这是我的代码：

auth.js（reducers 目录 - Redux）：

import { LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT_SUCCESS, REGISTER_SUCCESS, REGISTER_FAIL } from '../actions/types';

const initialState = {
  token: localStorage.getItem('token'),
  isAuthenticated: null,
  isLoading: false,
  isRegistered: false
}

export default function(state = initialState, action) {
  switch(action.type) {
    case REGISTER_SUCCESS:
      return {
        ...state,
        ...action.payload,
        token: null,
        isAuthenticated: false,
        isLoading: false,
        isRegistered: true
      }
    case LOGIN_SUCCESS:
      localStorage.setItem('token', action.payload.token);
      return {
        ...state,
        ...action.payload,
        isAuthenticated: true,
        isLoading: false,
      }
    case LOGIN_FAIL:
    case LOGOUT_SUCCESS:
    case REGISTER_FAIL:
      localStorage.removeItem('token');
      return { …

在一个屏幕上面对这个错误。虽然相同的 redux 配置适用于所有其他屏幕。

TypeError: (0 , _reactRedux.default) is not a function.(In'(0 , _reactRedux.default)(mapStateToProps,{})','(0 , _reactRedux.default)' is undefined)

我是 redux 的新手并且也对本机做出反应。我正在尝试从具有初始状态的根减速器初始化基本存储。连接 root reducer 来存储我的 redux 时不起作用。但是当我连接单个减速器来存储我的 redux 时。

RootReducer.js

import {combineReducers} from 'redux';
import cartItemsReducer from './CartItems';
import {CounterReducer} from './Counter';

const RootReducer = combineReducers({
  cartItemsReducer,
  CounterReducer,
});

export default RootReducer;

购物车项目.js

import {ADD_TO_CART, REMOVE_FROM_CART} from '../Actions/ActionTypes';

const initialState = [];

const cartItemsReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return [...state, action.payload];
    case REMOVE_FROM_CART:
      return state.filter((cartItem) => cartItem.id !== action.payload.id);
  }
  return state;
};

export default cartItemsReducer;

计数器.js

import {INCREASE_COUNT, DECREASE_COUNT} from …

我最近开始在 React 中使用 Redux。我想知道如何对我刚刚获取的数据执行一些逻辑（这是一种不好的做法吗？），在同一个处理程序中我调用了 redux 操作。我附上一个简单的例子，所以你可以理解我的意思。

 function CakeContainer(props) {
   return (
      <div>
         <h2>Number of cakes - {props.numOfCakes}</h2>
         <button onClick={props.buyCake}>Buy Cake</button>
      </div>
   )

}

props.buyCake工作正常，它numOfCakes从 redux 状态中获取并将显示在组件中的值减 1。所以如果一numOfCakes开始的值是10，点击按钮后就是9。

例如，如果我想乘以numOfCake按钮处理程序内部的值怎么办？组件代码将是

function CakeContainer(props) {
   return (
      <div>
         <h2>Number of cakes - {props.numOfCakes}</h2>
         <button onClick={() => {
           props.buyCake();
           console.log("num multiplied by 2",props.numOfCakes*2)
         }}>Buy Cake</button>
      </div>
   )

}

在控制台日志中，第一次单击按钮后，我有 20 (10*2) 个，因为NumOfCakes尚未更新。有没有办法在处理程序中获得更新的值，还是一种不好的做法？

我是初学者，不知道 createSlice 和 createReducer 有没有区别。

我应该选择哪个？

其次，我今天看了一个教程。这家伙刚刚制作了一个 store.js 文件和一个 userslice.js 文件。很简单。

但是他使它与 redux 文档有点不同。他在 userSlice.js 的末尾导出了三个 CONST，而不是文档中的两个。（我已经发表评论了）如果我将 state.user.user 更改为 state.user.wtf ......我会在一段时间后运行错误，因为某些组件不再访问用户对象了。

用户切片

import { createSlice } from '@reduxjs/toolkit';



export const userSlice = createSlice({
  name: "user",
  initialState: {
    user: null,
  },
  reducers: {
    login: (state, action) => {

      state.user = action.payload;
    },

    logout: (state) => {
      state.user = null;
    },
  },
});

export const { login, logout } = userSlice.actions;

export const selectUser = (state) => state.user.user; // What is that …