如何解决共享状态

Question

嗨，我正在尝试创建一个包含5个组件的导航栏，我可以在其中选择导航栏并添加一个机器人。 Add功能可以很好地与动作和reducer配合使用。我要在AddRobot中添加机器人的问题是，即使我在AddRobot组件中添加了新的机器人，列表也没有显示新添加的机器人。我的卡片清单是否与我的AddRobot组件断开连接？ 不更改cardList吗？ 如何使Cardlist.js文件和AddRobo.js共享我在reducers.js的数据状态中声明的同一机械手列表？

下面是我的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {
    createStore,
    combineReducers,
    applyMiddleware
} from 'redux';
import {
    Provider
} from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import {
    createLogger
} from 'redux-logger';
import 'tachyons';
import App from './containers/App';
import registerServiceWorker from './registerServiceWorker';
import {
    manage_data
} from './reducers'

import './index.css';

const logger = createLogger()

const rootReducers = combineReducers({
    manage_data
})

const store = createStore(rootReducers, applyMiddleware(thunkMiddleware, logger))

ReactDOM.render( <
    Provider store = {
        store
    } >
    <
    App / >
    <
    /Provider>,
    document.getElementById('root')
);
registerServiceWorker();

下面是我的app.js

import React, { Component } from 'react';
import {Link,Route,Switch} from 'react-router-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import {connect} from 'react-redux';
import { setSearchField, requestRobots} from '../actions';
import CardList from '../components/CardList';
import {useSelector,useDispatch} from 'react-redux';
import SearchBox from '../components/SearchBox';
import Scroll from '../components/Scroll';
import ErrorBoundry from '../components/ErrorBoundry';
import Home from '../components/Home';
import AddRobot from '../components/AddRobot';
import UppdateRobot from '../components/UpdateRobot';
import DeleteRobot from '../components/DeleteRobot';
import './App.css';


function App()  {
        const routes = [{
                id: 1,
                path:'/about',
                component:Home
                },
                {
                id: 2,
                path:'/addRobo',
                component:AddRobot
                },
                {
                id: 3,
                path:'/updateRobo',
                component:UppdateRobot
                },
                {
                id: 4,
                path:'/searchRobo',
                component: SearchBox
                },
                {
                id: 5,
                path:'/delRobo',
                component: DeleteRobot
                }
                ];

    const stylecur = {fill:'currentcolor'};
    const robotsTest = useSelector(state => state.manage_data.robots)


    return (
      <Router>
      <div className='tc'>

        <header className="bg-white black-80 tc pv4 avenir">
  <a href="/" className="bg-black-80 ba b--black dib pa3 w2 h2 br-100">
    <svg className="white" data-icon="skull" viewBox="0 0 32 32" style={stylecur}>
    <title>skull icon</title><path d="M16 0 C6 0 2 4 2 14 L2 22 L6 24 L6 30 L26 30 L26 24 L30 22 L30 14 C30 4 26 0 16 0 M9 12 A4.5 4.5 0 0 1 9 21 A4.5 4.5 0 0 1 9 12 M23 12 A4.5 4.5 0 0 1 23 21 A4.5 4.5 0 0 1 23 12"></path></svg>
  </a>
  <h1 className="mt2 mb0 baskerville i fw1 f1">RoboFriends</h1>
  <h2 className="mt2 mb0 f6 fw4 ttu tracked">Create an ensembe of Robot with your friends!</h2>
  <nav className="bt bb tc mw7 center mt4" >
    <Link to={'/about'} className="f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l">About This Page</Link>
    <Link to={'/addRobo'} className="nav-link f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l">Add Robot</Link>
    <Link to={'/updateRobo'} className="nav-link f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l">Update Robot</Link>
    <Link to={'/searchRobo'} className="nav-link f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l">Search Robot</Link>
    <Link to={'/delRobo'} className="nav-link f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l">Delete Robot</Link>
  </nav>
</header>
      <Switch>
   {routes.map(({id, path, component: Component }) => (
   <Route
    key={id}
    path={path}
    component={Component} // sans the angle brackets </>
  />))
}         

      </Switch>  
        <Scroll>{
            <ErrorBoundry>
              <CardList robots={robotsTest} />
            </ErrorBoundry>
          }
        </Scroll>
      </div>
      </Router>
    );
  }

export default App;

下面是我的AddRobot.js

import React from 'react';
import {
    useSelector,
    useDispatch
} from 'react-redux';
import {
    CHANGE_NAME,
    CHANGE_USERNAME,
    CHANGE_EMAIL,
    ADD_ROBOT
} from '../constants';


const AddRobot = () => {
    const emailInput = React.useRef();
    const nameInput = React.useRef();
    const userInput = React.useRef();
    const disPatch = useDispatch();

    const handleName = e => disPatch({
        type: CHANGE_NAME,
        payload: e.target.value
    });
    const handleUser = e => disPatch({
        type: CHANGE_USERNAME,
        payload: e.target.value
    });
    const handleEmail = e => disPatch({
        type: CHANGE_EMAIL,
        payload: e.target.value
    });
    const sendAdd = () => disPatch({
        type: ADD_ROBOT
    });

    const clearInputs = () => {
        emailInput.current.value = "";
        nameInput.current.value = "";
        userInput.current.value = "";
    };

    const name = useSelector(state => state.name)
    const username = useSelector(state => state.username)
    const email = useSelector(state => state.email)
    const handleAdd = e => {
        sendAdd();
        e.preventDefault();
    }

    return ( <
        div >
        <
        h1 > Add Robot By Name < /h1>


        <
        input className = 'pa2 ba b--green bg-lightest-blue'
        name = "fullname"
        placeholder = 'Add Name'
        value = {
            name
        }
        onChange = {
            handleName
        }
        ref = {
            nameInput
        }
        />

        <
        input className = 'pa2 ba b--green bg-lightest-blue'
        name = "username"
        placeholder = 'Add Username'
        value = {
            username
        }
        onChange = {
            handleUser
        }
        ref = {
            userInput
        }
        />

        <
        input className = 'pa2 ba b--green bg-lightest-blue'
        name = "email"
        placeholder = 'Add Email'
        value = {
            email
        }
        onChange = {
            handleEmail
        }
        ref = {
            emailInput
        }

        />

        <
        a className = "f50 link dim ph3 pv2 mb2 dib white bg-dark-green ma2"
        href = "addRobo"
        onClick = {
            handleAdd
        } >
        Add Robot <
        /a>

        <
        a className = "f50 link dim ph3 pv2 mb2 dib white bg-dark-green ma1"
        href = "#0"
        onClick = {
            clearInputs
        } >
        Reset Inputs <
        /a>


        <
        /div>
    );
}


export default AddRobot;

下面是我的CardList.js

import React from 'react';
import Card from './Card';

const CardList = ({
    robots
}) => {
    if (robots !== undefined) {
        return ( <
            div > {
                robots.map((user, i) => {
                    return ( <
                        Card key = {
                            i
                        }
                        id = {
                            robots[i].id
                        }
                        name = {
                            robots[i].name
                        }
                        email = {
                            robots[i].email
                        }
                        />
                    );
                })
            } <
            /div>
        );
    } else {
        return <h1 > Error < /h1>
    }
}

export default CardList;

下面是我的reducers.js文件。

import {
    CHANGE_SEARCHFIELD,
    CHANGE_NAME,
    CHANGE_USERNAME,
    CHANGE_EMAIL,
    ADD_ROBOT,
    UPDATE_ROBOT,
    DELETE_ROBOT,
    REQUEST_ROBOTS_PENDING,
    REQUEST_ROBOTS_SUCCESS,
    REQUEST_ROBOTS_FAILED
} from './constants';

const data = {
    robots: [{
        id: 1,
        name: 'John Doe',
        username: 'JD',
        email: 'john_doe@gmail.com',
    }],
    id: '',
    name: '',
    username: '',
    email: '',
    isPending: true,
    searchField: ''
}

function clear_field(user) {
    user.name = '';
    user.username = '';
    user.email = '';
}

function addNewRobot(obj, list) {
    var new_robot = {};
    new_robot.id = obj.robots.length + 1;
    new_robot.name = obj.name;
    new_robot.username = obj.userName;
    new_robot.email = obj.email;
    list.push(new_robot);
    return list;
}

export const manage_data = (state = data, action = {}) => {
    switch (action.type) {
        case ADD_ROBOT:
            var new_list = addNewRobot(state, state.robots);
            state.robots = new_list;
            clear_field(state);
            return Object.assign({}, state, {
                robots: new_list
            });
        case UPDATE_ROBOT:
            console.log("Hello Update!");
            return state;
        case DELETE_ROBOT:
            return state;
        case CHANGE_NAME:
            return Object.assign({}, state, {
                name: action.payload
            })
        case CHANGE_USERNAME:
            return Object.assign({}, state, {
                userName: action.payload
            })
        case CHANGE_EMAIL:
            return Object.assign({}, state, {
                email: action.payload
            })
        case REQUEST_ROBOTS_PENDING:
            return Object.assign({}, state, {
                isPending: true
            })
        case REQUEST_ROBOTS_SUCCESS:
            return Object.assign({}, state, {
                robots: action.payload,
                isPending: false
            })
        case REQUEST_ROBOTS_FAILED:
            return Object.assign({}, state, {
                error: action.payload
            })
        case CHANGE_SEARCHFIELD:
            return Object.assign({}, state, {
                searchField: action.payload
            })
        default:
            return state;
    }
}