React dom 不使用 Redux 存储进行更新

Question

我是 react-redux 的新手，我正在开发的网络应用程序遇到问题。该应用程序应该具有用户登录功能，它应该能够从我制作的数据库 api 中获取并显示游戏列表，并且应该能够在单击该列表时显示该列表中特定游戏的信息。

我的用户登录功能运行良好，但游戏列表和特定游戏详情最初并未显示在浏览器中。如果我查看 redux devtools，则调度操作并将正确的信息返回到状态，如果我翻阅 devtools（按下播放按钮），列表将显示在 dom 中，并一直保持到我刷新这页纸。游戏细节也是如此。

我不确定出了什么问题。我尝试调整我正在使用的反应组件和容器，但我想不到/在其他帖子中找到的任何东西似乎都不起作用。也许这是我如何设置初始状态的问题（我在用户登录减速器和游戏减速器中都有一个初始状态）？

我将在这篇文章中发布我认为相关的代码块。

存储/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（根 reducer 文件）

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（存储组合文件）

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 容器和组件： 应用.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（包含具有 Gamelist 容器的 Hompage 组件）

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（显示 GameList 容器的组件）

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（从商店调用 fetchGames 操作以生成游戏列表的容器

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
);

我会停在那里，因为这是第一次出现问题的地方。我知道我已经发布了很多代码，但我不确定在这种情况下什么是相关的或不相关的。

Answer 1

以这种方式更新状态是一种很好的做法，不要直接改变 我发现两个有效载荷 action.games 和 action.game 是故意的还是错字？

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;