Я пытаюсь немного попрактиковаться с редуксными утками в способе размещения файлов, я начал тренироваться, но получаю сообщение об ошибке в названии, которое не знаю, откуда оно, как будто я пытаюсь для реализации любым другим способом у меня нет проблем с редукторами, поэтому редукторы просто в порядке, но с такой настройкой, похоже, не работает: это мой магазин. js:
import { createStore, combineReducers } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import userReducer from "./userReducer"; // se le puede poner el nombre que quera porque estamos exportando como default solo esa funcion
import charsReducer, { getCharsAction } from "./charsReducer";
const rootReducer = combineReducers({
user: userReducer,
characters: charsReducer
});
// export const store = createStore(rootReducer, composeWithDevTools());
export default function generateStore() {
//toma como primer argumento el reducer, segundo el estado inicial, y tercero el middleware
const store = createStore(rootReducer, composeWithDevTools);
getCharsAction()(store.dispatch, store.getState); // traemos los personajes por primera vez
return store;
}
и это индекс. js:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import "font-awesome/css/font-awesome.css";
import { Provider } from "react-redux";
import generateStore from "./redux/store";
const store = generateStore();
const WithRouter = () => (
<BrowserRouter>
<App />
</BrowserRouter>
);
const WithStore = () => (
<Provider store={store}>
<WithRouter />
</Provider>
);
ReactDOM.render(<WithStore />, document.getElementById("root"));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
userReducer. js:
//PATRON DE DISEÑO REDUX DUCK
const initialState = {
loggedIn: false
};
//constants
const LOGIN = "LOGIN";
//reducer
export default function reducer(state = initialState, action) {
switch (action.type) {
case "LOGIN":
// return 1;
default:
return state;
}
} //el reducer esta siempre escuchando hasta que hagas una accion que coincida con las definidas
//actions
charsReducer. js:
import axios from "axios";
//constants
const initialState = {
fetching: false,
chars: [],
currentChar: {}
};
const API_URL = "https://rickyandmortyapi.com/api/character";
const GET_CHARACTERS = "GET_CHARACTERS";
const GET_CHARACTERS_SUCCESS = "GET_CHARACTERS_SUCCESS";
const GET_CHARACTERS_ERROR = "GET_CHARACTERS_ERROR";
//reducers
export default function reducer(state = initialState, action) {
switch (action.type) {
case GET_CHARACTERS:
case GET_CHARACTERS_ERROR:
case GET_CHARACTERS_SUCCESS:
return { ...state, array: action.payload }; // EN ESTE MOMENTO SE GUARDAN EN EL STORE, devuelve todo lo que tenias en el state y en el array mete ademas lo que le llaga por payload(los personajes)
default:
return state;
}
}
//actions(thunks)
export const getCharsAction = () => (dispatch, getState) => {
return axios.get(API_URL).then(res => {
dispatch({ type: GET_CHARACTERS_SUCCESS, payload: res.data.results });
});
};
вот вывод, который я получаю:
×
Error: Expected the reducer to be a function.
▶ 8 stack frames were collapsed.
generateStore
C:/Users/anton/desktop/Curso-React-Redux-GraphQL-master/src/redux/store.js:16
13 |
14 | export default function generateStore() {
15 | //toma como primer argumento el reducer, segundo el estado inicial, y tercero el middleware
> 16 | const store = createStore(rootReducer, composeWithDevTools);
17 | getCharsAction()(store.dispatch, store.getState); // traemos los personajes por primera vez
18 | return store;
19 | }
View compiled
Module../src/index.js
C:/Users/anton/desktop/Curso-React-Redux-GraphQL-master/src/index.js:11
8 | import { Provider } from "react-redux";
9 | import generateStore from "./redux/store";
10 |
> 11 | const store = generateStore();
12 |
13 | const WithRouter = () => (
14 | <BrowserRouter>
View compiled
__webpack_require__
C:/Users/anton/desktop/Curso-React-Redux-GraphQL-master/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
C:/Users/anton/desktop/Curso-React-Redux-GraphQL-master/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:1141:18
__webpack_require__
C:/Users/anton/desktop/Curso-React-Redux-GraphQL-master/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
checkDeferredModules
C:/Users/anton/desktop/Curso-React-Redux-GraphQL-master/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 |
View compiled
Array.webpackJsonpCallback [as push]
C:/Users/anton/desktop/Curso-React-Redux-GraphQL-master/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:65
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.