我们可以使用导航到不同的路径

this.props.router.push('/some/path')

有没有办法在导航时发送params(对象)？

还有其他我可以想到的选择,但是想知道是否可以通过object？

• 我可以嵌入对象的id并从新页面重新从服务器中获取对象.

• 或者我可以将对象存储在全局存储中,如redux store.(这个对象需要很快从商店中删除.所以我认为把它放在那里可能不太好)

我正在研究反应,我有一个这样的例子

//index.js
const store = createStore(reducer)
render(
  <Provider store={store}>
    <AddTodo />
  </Provider>,
  document.getElementById('root')
)

//Apptodo.js
import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
    .......

为什么不能得到this.pros.store,只需调用dispatch()函数？

编辑:它是如何提取dispatch的this.pros.不是对象this.pros.store吗？在这种情况下,为什么我们不提取store？

谢谢.

我在尝试将 react-redux 包安装到我的 create-react-app 应用程序上时遇到错误。我尝试删除并重新安装我的 node_modules 文件夹以及使用管理员权限安装它，但我仍然收到相同的错误

?  frontend git:(main) ? npm i react-redux
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree

这是控制台的剩余输出

npm ERR! 
npm ERR! While resolving: frontend@0.1.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.3" from react-redux@7.2.1
npm ERR! node_modules/react-redux
npm ERR!   react-redux@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency …

当我为chrome扩展添加中间件时,reducers在站点上停止正常工作(但chrome/redux调试工具正常工作)+我在控制台中出现以下错误:

减速器接收的先前状态具有意外类型的"功能".预期参数为具有以下键的对象:"auth","common","home"

这是代码:

import { applyMiddleware, createStore } from 'redux';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducer';

const middleware = applyMiddleware(promiseMiddleware, localStorageMiddleware);

const store = createStore(reducer, middleware,
      window.devToolsExtension ? window.devToolsExtension() : f => f);

export default store;

如果我删除铬部分:

,window.devToolsExtension ? window.devToolsExtension() : f => f

如果再次正常工作.

我目前正在学习本教程.我mapStateToProps在下面的代码中遇到了一些障碍:

import React from 'react';
import Voting from './voting';
import {connect} from 'react-redux';

const mapStateToProps = (state) => {
  return {
    pair: state.getIn(['vote','pair']),
    winner: state.get('winner')
  };
}

const VotingContainer = connect(mapStateToProps)(Voting);
export default VotingContainer;

以下是导入的投票组件:

import React from 'react';
import Vote from './Vote';
import Winner from './winner';

const Voting = ({pair,vote,hasVoted,winner}) =>
  <div>
    {winner ? <Winner winner={winner}/>  :
      <Vote pair={pair} vote={vote} hasVoted={hasVoted}/>
    }
  </div>

export default Voting;

它应该从pair道具渲染两个按钮.该vote道具是将上点击执行的功能,hasVoted真正当禁用按钮和获奖者只呈现赢家组件,如图所示.

该状态应该是一个看起来像这样的immutableJS地图:

Map({ …

我正在尝试设计一个通知组件,其中通知将在某些场合出现(如连接问题,成功修改等).

我需要在几秒钟后消失通知,因此我触发状态更改以从通知setTimeout内部删除Redux状态的通知componentDidMount.

我可以看到状态确实发生了变化,但React-Redux没有重新渲染父组件,因此通知仍然出现在DOM上.

这是我的Redux减速机:

const initialState = {
    notifications: []
}

export default function (state = initialState, action) {
  switch(action.type) {
    case CLEAR_SINGLE_NOTIFICATION:
      return Object.assign ({}, state, {
        notifications: deleteSingleNotification(state.notifications, action.payload)
      })
      case CLEAR_ALL_NOTIFICATIONS:
        return Object.assign ({}, state, {
          notifications: []
        })
      default:
        return state
    }
}

function deleteSingleNotification (notifications, notificationId) {
  notifications.some (function (notification, index) {
    return (notifications [index] ['id'] === notificationId) ?
           !!(notifications.splice(index, 1)) :
           false;
  })

  return notifications;
}

和我的React组件(Main和Notification …

我正在尝试重构我的应用程序以分离表示和容器组件.我的容器组件只是在connect()react-redux调用中包含的表示组件,它将状态和动作创建器映射到表示组件的道具.

待办事项,list.container.js

import React, {Component} from 'react';
import {connect} from 'react-redux';

import {fetchTodos} from '../actions/todo.actions';
import TodoList from '../components/todo-list.component';

export default connect(({todo}) => ({state: {todo}}), {fetchTodos})(TodoList);

待办事项,list.component.jsx

import React, {Component} from 'react';

import TodoContainer from '../containers/todo.container';

export default class TodoList extends Component {
    componentDidMount () {
        this.props.fetchTodos();
    }

    render () {
        const todoState = this.props.state.todo;

        return (
            <ul className="list-unstyled todo-list">
                {todoState.order.map(id => {
                    const todo = todoState.todos[id];
                    return <li key={todo.id}><TodoContainer todo={todo} /></li>;
                })}
            </ul>
        );
    }
};

todo.container.js …

我收到以下错误:

node_modules/@types/react-redux/index.d.ts(8,24): error TS2307: Cannot find module 'redux'.

尽管安装了两个react-redux和redux(package.json):

"dependencies": {
    "react": "15.4.2",
    "react-native": "0.42.3",
    "react-redux": "^5.0.3",
    "redux": "^3.6.0"
},
"devDependencies": {
    "@types/react": "^15.0.18",
    "@types/react-native": "^0.42.9",
    "@types/react-redux": "^4.4.38",
    "@types/redux": "^3.6.0",
    "babel-jest": "19.0.0",
    "babel-preset-react-native": "1.9.1",
    "jest": "19.0.2",
    "react-test-renderer": "15.4.2",
    "tslint": "^4.5.1",
    "typescript": "^2.2.1"
},

该README.md文件中@types/redux说:

This is a stub types definition for Redux (https://github.com/reactjs/redux).
Redux provides its own type definitions, so you don't need @types/redux installed!

但卸载@types/redux包没有区别.

有任何想法吗？

UPDATE …

我正在创建的应用程序有很多实体和关系(数据库是关系).为了得到一个想法,有25个以上的实体,它们之间有任何类型的关系(一对多,多对多).

该应用程序是基于React + Redux的.为了从商店获取数据,我们使用了Reselect库.

我面临的问题是当我试图从商店获得一个与其关系的实体时.

为了更好地解释这个问题,我创建了一个简单的演示应用程序,它具有类似的架构.我将重点介绍最重要的代码库.最后,我将包括一个片段(小提琴),以便与它一起玩.

演示应用

商业逻辑

我们有书籍和作者.一本书有一位作者.一位作者有很多书.尽可能简单.

const authors = [{
  id: 1,
  name: 'Jordan Enev',
  books: [1]
}];

const books = [{
  id: 1,
  name: 'Book 1',
  category: 'Programming',
  authorId: 1
}];

Redux商店

商店采用扁平结构,符合Redux最佳实践 - 规范状态.

这是书籍和作者商店的初始状态:

const initialState = {
  // Keep entities, by id:
  // { 1: { name: '' } }
  byIds: {},
  // Keep entities ids
  allIds:[]
};

组件

组件组织为容器和演示文稿.

<App /> 组件充当Container(获取所有需要的数据):

const mapStateToProps = state => ({
  books: …

使用react-dom/client时出现以下错误

Compiled with problems:X

ERROR in src/index.tsx:2:28

TS7016: Could not find a declaration file for module 'react-dom/client'. 'C:/Users/Mohamad/Desktop/HIS/Administration/Administration/Administration/Administration.Endpoints.WebUI/ClientApp/node_modules/react-dom/client.js' implicitly has an 'any' type.
  Try `npm install @types/react-dom` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-dom/client';`
    1 | import * as React from 'react';
  > 2 | import { createRoot } from 'react-dom/client';
      |                            ^^^^^^^^^^^^^^^^^^
    3 | import App from './App';
    4 |
    5 |