Redux未提供已更新状态

Question

我是Redux .I的新手，我正在使用Reactjs、Redux和React-flow制作一个可视化工作流平台。用户可以通过在调色板中输入节点的名称和类型来添加节点(右侧如图所示)。我将新的节点名和类型传递给Redux分派。调度和更新状态很好(我已经在控制台上打印了它)，状态正在更新，但我没有自动获得更新的状态，就像我们在Reactjs中更新钩子一样，只要使用钩子变量，它的更改就会显示出来。但在这里，它不是这样工作的。我将更新后的状态的长度打印在中间div的顶部(节点显示的位置)，即使我给state添加了一个新对象，它也只显示0。

我在网上搜索过了，发现Redux中的Connect函数会有帮助，我也实现了它。但是没有解决方案。

我已经找了两天了，但是找不到问题出在哪里。如果有人知道问题出在哪里，我遗漏/忽略了什么。请让我知道，这将是很大的帮助。

Graph.js (我希望状态自动更新的位置)：

import React, { useState, useEffect } from 'react';
import ReactFlow, { Controls, updateEdge, addEdge } from 'react-flow-renderer';
import { useSelector ,connect} from 'react-redux';
import input from '../actions/input';
const initialElements = [
  {
    id: '1',
    type: 'input',
    data: { label: 'Node A' },
    position: { x: 250, y: 0 },
  }]
function Graphs(props) {
  const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
  const [elements, setElements] = useState(initialElements);
  // const [state,setState]=useState(useSelector(state => state.nodeReducers))
  
  useEffect(() => {
    if (props.elements.length) {
      console.log("useEffect in", props.elements)
      setElements(els => els.push({
        id: (els.length + 1).toString(),
        type: 'input',
        data: props.elements.data,
        position: props.elements.position
      }));
      return;
    }
    console.log("outside if ",props.elements)
  }, [props.elements.length])
  const onEdgeUpdate = (oldEdge, newConnection) =>
    setElements((els) => updateEdge(oldEdge, newConnection, els));
  const onConnect = (params) => setElements((els) => addEdge(params, els));
  return (
    <ReactFlow
      elements={elements}
      onLoad={onLoad}
      snapToGrid
      onEdgeUpdate={onEdgeUpdate}
      onConnect={onConnect}
    >
      {console.log("in main", props.elements)}
      <Controls />
      <p>hello props {props.elements.length}</p>
    </ReactFlow>

  )
}
const mapStateToProps=state=>{
  return{
    elements:state.nodeReducers
  }
}
const mapDisptachToProps=dispatch=>{
  return{
    nodedispatch:()=>dispatch(input())
  }
}
export default connect(mapStateToProps,mapDisptachToProps)(Graphs);

nodeReducers.js (减速机)：

const nodeReducers=(state=[],action)=>{
      switch (action.type) {
            case "ADD":
                  state.push(...state,action.NodeData)
                  console.log("in node reducers",state)
                  return state;
            default:
                  return state;
      }
}
export default nodeReducers;

Input.js(操作)：

const input = (obj = {}) => {
      console.log("in action",obj)
      return {
            type: "ADD",
            NodeData: {
                  type: 'input',
                  data: { label: obj.NodeValue },
                  position: { x: 250, y: 0 }
            }
      }
}
export default input;

PaletteDiv.js (右侧调色板div，我在这里接受用户输入)：

import React, { useState } from 'react'
import '../styles/compoStyles/PaletteDiv.css';
import { makeStyles } from '@material-ui/core/styles';
import { FormControl, TextField, InputLabel, Select, MenuItem, Button } from '@material-ui/core';
import {  connect } from 'react-redux';
import input from '../actions/input';
function PaletteDiv(props) {
      const [nodename, setNodename] = useState();
      const [nodetype, setNodetype] = useState();
      const [nodevalue, setNodevalue] = React.useState('');

      const handleChange = (event) => {
            setNodevalue(event.target.value);
            setNodetype(event.target.value);
      };

      const useStyles = makeStyles((theme) => ({
            margin: {
                  margin: theme.spacing(1),
                  width: "88%"
            },
            formControl: {
                  margin: theme.spacing(1),
                  minWidth: 120,
            },
            selectEmpty: {
                  marginTop: theme.spacing(2),
            }
      }));

      const styles = {
            saveb: {
                  float: "left",
                  margin: "auto"
            },
            cancelb: {
                  float: "right"
            },
            inputfield: {
                  display: "block",
                  width: "100%",
                  margin: "0"
            }
      }
      const classes = useStyles();
      const useStyle = makeStyles(styles);
      const css = useStyle();
      return (
            <div id="myPaletteDiv">
                  <div className="heading">
                        <h1>Palette</h1>
                  </div>
                  <div className="palette">
                        <label >WorkFlow Name</label>
                        <TextField id="outlined-basic" fullwidth className={css.inputfield} variant="outlined" onChange={e => setNodename(e.target.value)} />
                        <label >Type of Node</label>
                        <FormControl variant="outlined" className={classes.formControl}>
                              <InputLabel id="demo-simple-select-outlined-label">Node</InputLabel>
                              <Select
                                    labelId="demo-simple-select-outlined-label"
                                    id="demo-simple-select-outlined"
                                    value={nodevalue}
                                    onChange={handleChange}
                                    label="Age"
                              >
                                    <MenuItem value="">
                                          <em>None</em>
                                    </MenuItem>
                                    <MenuItem value={10}>Step</MenuItem>
                                    <MenuItem value={20}>Condition</MenuItem>
                              </Select>
                              <Button variant="contained" color="primary" onClick={(e) => {
                             e.preventDefault();   
                      const node = { 
                                          NodeType: nodetype,
                                          NodeValue: nodename
                                    }
                                    props.nodedispatch(node)
                                    console.log("done dispatching")
                              }}>
                                    Add Node
                              </Button>
                        </FormControl>
                  </div>
            </div>
      )
}

const mapStateToProps = state => {
      return {
            elements: state.nodeReducers
      }
}
const mapDisptachToProps = dispatch => {
      return {
            nodedispatch: (node) => dispatch(input(node))
      }
}
export default connect(mapStateToProps, mapDisptachToProps)(PaletteDiv);

ScreenShot：

​

在这里您可以看到我有一个

标签在中间div的顶部。它显示"hello props 0“。每当我添加一个节点时，我希望0(零)改变。

感谢你

你真心的，

里沙布·拉格文德拉

Answer 1

不要直接将数据推入状态，而是使用扩展操作符重新分配状态

const nodeReducers = (state = [],action) => {
      switch (action.type) {
            case "ADD":
                  state = [...state, action.NodeData];
                  console.log("in node reducers",state);
                  return state;
            default:
                  return state;
      }
}
export default nodeReducers;

Answer 2

这是因为你的reducers，，必须是纯函数。Reducer必须处理状态，就像处理不可变的数据一样。你必须在你的reducers中避免副作用

https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers#rules-of-reducers

我同意前面的回答，但是，正如我前面所说的，这里我们可以避免像reassing这样的副作用：

const nodeReducers = (state = [],action) => {
      switch (action.type) {
            case "ADD":
                  return [...state, action.NodeData];
            default:
                  return state;
      }
}
export default nodeReducers;

此外，根据最佳实践，强烈建议将您的操作类型写入常量，并在您的操作和缩减程序中使用它们，而不是字符串。

// actionTypes.js
export const ADD = "ADD";
// then import it in your reducer and action