Я новичок в Reaction-Redux, и у меня возникла проблема с разрабатываемым веб-приложением. Приложение должно иметь функцию входа пользователя в систему, оно должно иметь возможность извлекать и отображать список игр из базы данных API, которую я сделал, и оно должно иметь возможность отображать информацию для определенной c игры из этого списка, когда оно clicked.
У меня отлично работает функция входа в систему, но список игр и подробные c подробности игры изначально не отображаются в браузере. Если я посмотрю на devx, то он отправляется и возвращает правильную информацию в состояние, и если я пролистываю devtools (pu sh кнопка воспроизведения), список будет отображаться в домене и останется. пока я не обновлю sh страницу. То же самое относится и к деталям игры.
Я не уверен, что не так. Я попытался настроить компоненты и контейнеры реагирования, которые я использую, но ничего, что я не могу найти / найти в других сообщениях, похоже, не работает. Может быть, это проблема с тем, как у меня настроено начальное состояние (у меня есть начальное состояние как в редукторе входа в систему пользователя, так и в редукторе игр)?
Я выложу то, что я считаю релевантными блоками кода в этом посте.
магазин / редукторы / 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;
}
};
стор / редукторы / игры. 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;
магазин / redurs / index. js (файл редуктора root)
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 (содержит компонент Hompage, в котором находится контейнер Gamelist)
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));
Домашняя страница. 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
);
Я остановлюсь на этом, потому что именно здесь проблема возникает впервые. Я знаю, что выложил все не код, но я не уверен, что уместно или не имеет значения в этой ситуации.