React dom not updating with Redux store

问题

I'm new to react-redux and I'm having an issue with a web-app I'm developing. The app should have a user log-in functionality, it should be able to fetch and display a list of games from a database api I made, and it should be able to display information for a specific game from that list when it's clicked.

I have the user log-in functionality working perfectly, but the game list and specific game details don't initially display in the browser. If I look in the redux devtools, the action is dispatched and returns the correct information to the state, and if I page-through the devtools (push the play button), the list will show up in the dom, and stay until I refresh the page. The same is true for the game details.

I'm not sure what is wrong. I tried adjusting the react components and containers I'm using, but nothing I can think of / found in other posts seems to work. Maybe it's a problem with how I have the initial state set up (I have a initial state in both the user-login reducer and in the games reducer)?

I'll post what I think are the relevant blocks of code in this post.

store/reducers/currentUser.js

import { SET_CURRENT_USER } from "../actionTypes";

const DEFAULT_STATE = {
    isAuthenticated: false, //hopefully be true, when user is logged in
    user: {} //all user info when logged in
};

export default (state = DEFAULT_STATE, action) => {
    switch (action.type) {
        case SET_CURRENT_USER:
            return {
                // turn empty object into false, or if there are keys true
                isAuthenticated: !!Object.keys(action.user).length,
                user: action.user
            };
        default:
            return state;
    }
};

stor/reducers/games.js

import { LOAD_GAMES, SET_CURRENT_GAME } from "../actionTypes";

const initState = {
    current: {},
    list: []
}
const game = (state = initState, action) => {
    switch (action.type) {
        case LOAD_GAMES:
            state.list = action.games;
            return state
        case SET_CURRENT_GAME:
            state.current = action.game;
            return state;
        default:
            return state;
    }
};

export default game;

store/reducers/index.js (the root reducer file)

import {combineReducers} from "redux";
import currentUser from "./currentUser";
import games from "./games";
import errors from "./errors";

const rootReducer = combineReducers({
    currentUser,
    games,
    errors
});

export default rootReducer;

store/index.js (the store composition file)

import rootReducer from "./reducers";
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";

export function configureStore() {
    const store = createStore(
        rootReducer, 
        compose(
            applyMiddleware(thunk),
            window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
        )
    );

    return store;
}

store/actions/games.js

import { apiCall } from "../../services/api";
import { addError } from "./errors";
import { LOAD_GAMES, SET_CURRENT_GAME } from "../actionTypes"; 

export const loadGames = games => ({
  type: LOAD_GAMES,
  games
});

export const setCurrentGame = game => ({
    type: SET_CURRENT_GAME,
    game
});

export const fetchGames = () => {
  return dispatch => {
    return apiCall("GET", "api/games/")
      .then(res => {
        dispatch(loadGames(res));
      })
      .catch(err => {
        dispatch(addError(err.message));
      });
  };
};

//WRITE A FUNCTION TO SET_CURRENT_GAME TO BE THE ID OF THE GAME THAT IS CLICKED ON.
export const getGameDetails = game_id => {
    return dispatch => {
        return apiCall("GET", `/api/games/${game_id}`)
            .then(res => {
                dispatch(setCurrentGame(res));
        })
        .catch(err => {
            dispatch(addError(err.message));
        });
    };
};

export const postNewGame = title => (dispatch, getState) => {
  return apiCall("post", "/api/games", { title })
    .then(res => {})
    .catch(err => addError(err.message));
};

React containers and components: App.js

import React from 'react';
import {Provider} from "react-redux";
import {configureStore} from "../store";
import {BrowserRouter as Router} from "react-router-dom";
import Navbar from "./Navbar";
import Main from "./Main";
import {setAuthorizationToken, setCurrentUser} from "../store/actions/auth";
import jwtDecode from "jwt-decode";

const store = configureStore();

if (localStorage.jwtToken) {
  setAuthorizationToken(localStorage.jwtToken);
  // prevent someone from manually tampering with the key of jwtToken in localStorage
  try {
    store.dispatch(setCurrentUser(jwtDecode(localStorage.jwtToken)));
  } catch (e) {
    store.dispatch(setCurrentUser({}));
  }
}

const App = () => (
    <Provider store={store}>
        <Router>
            <div className="onboarding">
                <Navbar />
                <Main />
            </div>
        </Router>
    </Provider>
);

export default App;

Main.js (houses the Hompage component which has the Gamelist container)

import React from "react";
import {Switch, Route, withRouter, Redirect} from "react-router-dom";
import {connect} from "react-redux";
import Homepage from "../components/Homepage";
import AuthForm from "../components/AuthForm";
import {authUser} from "../store/actions/auth";
import {removeError} from "../store/actions/errors"
import withAuth from "../hocs/withAuth";
import GameForm from "./GameForm";
import GamePage from "../components/GamePage";

const Main = props => {
    const {authUser, errors, removeError, currentUser} = props;
    return (
        <div className="container">
            <Switch>
                <Route path="/" exact render={props => <Homepage currentUser={currentUser} {...props} /> } />
                <Route 
                    path="/signin" exact
                    render={props => {
                        return(
                            <AuthForm 
                                removeError={removeError}
                                errors={errors}
                                onAuth={authUser}
                                buttonText="Log in" 
                                heading="Welcome Back." 
                                {...props} 
                            />
                        )
                    }} />
                <Route 
                    path="/signup" exact
                    render={props => {
                        return(
                            <AuthForm
                                removeError={removeError}
                                errors={errors}
                                onAuth={authUser}
                                signUp
                                buttonText="Sign me up" 
                                heading="Join Weekly Matchup today." 
                                {...props} 
                            />
                        )
                    }} 
                />
                <Route 
                    path="/games/new" exact
                    component={withAuth(GameForm)}
                />
                <Route
                    path="/games/:game_id" 
                    render={props => {
                        return(
                            <GamePage 
                                currentUser={currentUser}
                                {...props} 
                            />
                        )
                    }}
                />
                <Redirect to="/" />
            </Switch>
        </div>
    )
}

function mapStateToProps(state){
    return {
        currentUser: state.currentUser,
        errors: state.errors
    };
}

export default withRouter(connect(mapStateToProps, {authUser, removeError})(Main));

Homepage.js (the component that displays the GameList container)

import React from "react";
import { Link } from "react-router-dom";
import GameList from "../containers/GameList";

const Homepage = ({ currentUser }) => {
    if (!currentUser.isAuthenticated) {
        return (
            <div className="home-hero">
                <h1>Welcome to the Weekly Matchup!</h1>
                <h4>Weekly Matchup is a web app that allows you to vote for which characters you think are favored to win in a one-on-one matchup in a variety of fighting games.</h4>
                <p>If you would like to vote for and comment on this week's matchups, please be sure to make an account by clicking the link below, or sign in!</p>
                <Link to="/signup" className="btn btn-primary">
              Sign up here
        </Link>
            </div>
        );
    }
    return (
        <div>
            <div className="home-hero">
                <h4>Click on the games below to see this week's matchups.</h4>
                <GameList />
            </div>
        </div>
    );
};

export default Homepage;

GameList.js (the container that calls the fetchGames action from the store to generate the list of games

import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { fetchGames } from "../store/actions/games";


class GameList extends Component {
    componentDidMount() {
        this.props.fetchGames();
    }
    render() {

        const { list } = this.props;
        let gameList = list.map(g => ( 
            <li className="list-group-item" key= {g._id}>
                <Link to={`/games/${g._id}`}>
                    {g.title}
                </Link>
            </li>
        ));
        return (
            <div className="row col-sm-8">
                <div className="offset-1 col-sm-10">
                    <ul className="list-group" id="games">
                        {gameList}
                    </ul>
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        list: state.games.list
    };
}

export default connect(mapStateToProps, { fetchGames })(
    GameList
);

I'll stop there because that's where the problem occurs for the first time. I am aware I have posted a lot of code, but I'm not sure what is relevant or irrelevant in this situation.

回答1:

It's a good practice to update the state this way don't mutate directly I find two payload action.games and action.game is that intentional or a typo?

import { LOAD_GAMES, SET_CURRENT_GAME } from "../actionTypes";

const initState = {
    current: {},
    list: []
}
const game = (state = initState, action) => {
    switch (action.type) {
        case LOAD_GAMES:
            return {...state,
                    list:action.game
                     }
        case SET_CURRENT_GAME:
           return {...state,
                    current:action.games,
                     }
        default:
            return state;
    }
};

export default game;

来源：https://stackoverflow.com/questions/60987295/react-dom-not-updating-with-redux-store