标签: react-redux

我在redux createStore方法中设置了InitialState,并将InitialState作为第二个参数

我在浏览器中出错:

<code>Uncaught Error: Reducer "postsBySubreddit" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined.</code>

代码在这里:

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
import rootReducer from '../reducers/reducers'
import Immutable from 'immutable'
const loggerMiddleware = createLogger()
//const initialState=0
function configureStore() {
    return createStore(
    rootReducer,
     {postsBySubreddit:{},selectedSubreddit:'reactjs'},
     applyMiddleware(
     thunkMiddleware,
    loggerMiddleware
  )
 )
}
  export default configureStore …

我已经插入了一个中间件,redux-thunk,我想添加另一个,redux-logger.

如何配置它以便我的应用程序使用两个中间件？我试过传递一组[ReduxThunk, logger]但是没有用.

码:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import logger from 'redux-logger';

import App from './components/app';
import reducers from './reducers';
require('./style.scss');

const createStoreWithMiddleware = applyMiddleware(ReduxThunk)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>,
  document.querySelector('#app')
);

我有以下组件触发了no-shadowESlint错误FilterButton props.

import { setFilter } from '../actions/filter';


function FilterButton({ setFilter }) {
  return (
    <button onClick={setFilter}>Click</button>
  );
}

export default connect(null, { setFilter })(FilterButton);

如何在保持简洁语法mapDispatchToProps和ESlint规则的同时避免警告？

我知道我可以添加注释来抑制警告,但是对每个组件执行此操作似乎都是多余且乏味的.

我有这个行动的反应

export function fetchPosts() {
    const request = axios.get(`${WORDPRESS_URL}`);
    return {
        type: FETCH_POSTS,
        payload: request
    }
}

在这种情况下如何测试axios？Jest在那里有这个用例的异步代码,他们使用模拟函数,但我不知道我是否可以用axios做到这一点？参考:https://facebook.github.io/jest/docs/tutorial-async.html

到目前为止,我已经做了这个测试,它正在返回正确的类型

it('should dispatch actions with the correct type', () => {
    store.dispatch(fetchPosts());
    let action = store.getActions();
    expect(action[0].type).toBe(FETCH_POSTS);
});

我不知道如何传递模拟数据并测试它返回但是,有没有人有任何想法？

先感谢您

我正在使用React + Flux.我们的团队正计划从通量转向redux.Redux对于我来自flux world来说非常困惑.在磁通控制流程中,从组件 - >操作 - >存储和存储更新返回组件很简单.它简单而且非常清晰.

但在redux中它令人困惑.这里没有商店,是的,有些例子没有使用商店.我经历了几个教程,似乎每个人都有自己的实现风格.有些人正在使用容器,有些人则没有.(我不知道这个容器概念,也无法理解mapStatePtoProps所做的mapStateToProps).

1. 有人可以清楚地解释如何在redux中控制流程吗？
2. redux中组件/容器/操作/操作创建者/存储的角色是什么？
3. redux/react-redux/redux-thunk /任何其他的区别？
4. 如果您可以发布任何简单而精确的 redux教程的链接,将会非常有用.

我正在使用reactjs路由器的链接组件,我无法使onClickevent正常工作.这是代码:

<Link to={this.props.myroute} onClick='hello()'>Here</Link>

这是通过这种方式或其他方式实现的吗？

我正在尝试使用以下语法在redux中创建一个商店: -

const middlewares = [
  thunk,
  logger
]

const wlStore = createStore(
  rootReducer,
  initialState
  compose(applyMiddleware(...middlewares))
)

以上工作对我来说很好,我可以访问商店,但最近我碰到了另一种语法: -

const wlStore=applyMiddleware(thunk,logger)(createStore)(rootReducer)

他们俩似乎都在做同样的工作.

有什么理由因为我更喜欢一个而不是另一个吗？优点缺点？

我开始学习React/Redux并偶然发现了一些可能是一个非常基本的问题.以下是我的应用程序的片段,为简单起见删除了一些代码.

我的状态由一系列默认为空的站点描述.LOAD_SITES每当用户分页到不同的页面时,后来的reducer将有动作加载不同的站点集,但是现在它什么都不做.React从渲染开始PublishedSitesPage,然后渲染然后渲染PublishedSitesBox,然后循环数据并渲染单个网站.

我想要做的是让它使用默认的空数组渲染所有内容,同时启动"从服务器加载站点"的承诺,一旦它结算,就会调度LOAD_SITES操作.拨打这个电话的最佳方式是什么？我在考虑PublishedSitesBox或者也许是构造函数componentDidMount.但不确定这是否可行 - 我担心的是,我会以这种方式创建一个无限循环,以保持重新渲染.我想我可以通过在"haveRequestedInitialData"的行中设置一些其他状态参数来以某种方式阻止这种无限循环.我的另一个想法是在做完之后立即做出这个承诺ReactDOM.render().什么是最好,最干净的方法？

export default function sites(state = [], action) {
  switch (action.type) {
    default:
      return state;
  }
}
...

const publishedSitesPageReducer = combineReducers({
  sites
});

ReactDOM.render(
  <Provider store={createStore(publishedSitesPageReducer)}>
    <PublishedSitesPage />
  </Provider>,
  this.$view.find('.js-published-sites-result-target')[0]
);

...

export default function PublishedSitesPage() {
  return (
    <PublishedSitesBox/>
  );
}

...

function mapStateToProps(state) {
  return { sites: state.sites };
}

const PublishedSitesBox = connect(mapStateToProps)(({sites}) => {
  // render sites …

我正在尝试将我正在构建的应用程序切换为使用 Redux Toolkit，并且在我从 createStore 切换到 configureStore 时注意到出现此错误：

A non-serializable value was detected in the state, in the path: `varietals.red.0`. Value:, Varietal {
  "color": "red",
  "id": "2ada6486-b0b5-520e-b6ac-b91da6f1b901",
  "isCommon": true,
  "isSelected": false,
  "varietal": "bordeaux blend",
}, 
Take a look at the reducer(s) handling this action type: TOGGLE_VARIETAL.
(See https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state)

在四处探索之后，我发现问题似乎出在我的自定义模型上。例如，品种数组是从品种模型创建的：

class Varietal {
  constructor(id, color, varietal, isSelected, isCommon) {
  this.id = id;
  this.color = color;
  this.varietal = varietal;
  this.isSelected = isSelected;
  this.isCommon = isCommon;
 }
}

并使用它映射一个字符串数组来创建我的 Varietal 数组，该数组进入我的状态：

// my utility …

我正在尝试使用 React-Redux 库，但标题出现错误。我用 Provider 包装了我的组件，但我仍然收到错误，只有当我实现 useDispatch() 钩子时。

该应用程序运行良好，直到我添加了 useDispatch() 行。可以删除有关调度功能的其余行，但我仍然遇到相同的错误。

如果你能帮助我，我将不胜感激。谢谢

这是我的代码：

import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import Navigator from './navigation/Navigator';

import React, {useEffect, useState, useCallback} from 'react';
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';

import {createStore, combineReducers} from 'redux';
import {Provider, useDispatch} from 'react-redux';
import dataReducer from './store/reducers/dataReducer';
import {CONSTANTS} from './constants/constants';
import {saveInitialData} from './store/actions/dataActions';

const App = () => {
  const [fetched, setFetched] = useState(initialState);

  const dispatch = useDispatch();

  const saveInitialDataHandler = useCallback(data => {
    dispatch(saveInitialData(data)); …