"Expected the reducer to be a function." only on server - reactjs

I am building an isomorphic app and I have a strange problem with my store and reducers. When I import my reducers in the client side store, it all works:
import reducers from '../Reducers';
...
let store = createStore(reducers, initial, composeEnhancers(applyMiddleware(...middleware)));
export default store;
But when I try to do the same on the server:
import reducers from '../source/js/Reducers';
I am getting error in the console
Error: Expected the reducer to be a function.
My reducers are like this:
import { INSERT_POST, INSERT_CONTENT, BUMP_PAGE, FETCH_COLLECTION } from '../Actions/Content';
const defaultState = {
currentPage: 0,
nextPage: 1,
content: [],
fetched: []
};
const reducer = (state = defaultState, action) => {
switch (action.type) {
case INSERT_POST:
return { ...state, content: [ ...state.content, action.payload ], fetched: [ ...state.fetched, action.url ] };
case INSERT_CONTENT:
const newState = {...state};
newState.content[action.payload.id].content = action.payload.data;
return newState;
case `${FETCH_COLLECTION}_SUCCESS`:
return { ...state, fetched: [ ...state.fetched, action.meta.previousAction.payload.request.url ]};
case BUMP_PAGE:
return { ...state, currentPage: state.nextPage, nextPage: ++state.nextPage };
default:
return state;
}
};
export default reducer;
...
import { START_TRANSITION, END_TRANSITION, TOGGLE_TRANSITION } from '../Actions/Transitions';
const defaultState = {
loaded: true
};
const reducer = (state = defaultState, action) => {
switch (action.type) {
case START_TRANSITION:
return { ...state, loaded: false };
case END_TRANSITION:
return { ...state, loaded: true };
case TOGGLE_TRANSITION:
return { ...state, loaded: !state.loaded };
default:
return state;
}
};
export default reducer;
And the main reducer:
import { combineReducers } from 'redux';
import Transitions from './Transitions'
import Content from './Content';
export default combineReducers({
Transitions,
Content
});
I have no idea of what to do with this. It's the first time I ever see such error. What can I do?

Related

Why reducer throws ReferenceError?

This my first version, but it didn't work well with Next.js:
import { createReducer } from '../storeUtils';
import { SET_PRODUCT_DEPARTMENTS } from '../actions/productActions';
const initialState = {
productDepartments: []
};
function setProductDepartments(state, action) {
return {
...state,
productDepartments: action.payload
};
}
export default createReducer(initialState, {
[SET_PRODUCT_DEPARTMENTS]: setProductDepartments
});
In this case when I write "next build" it throws this error:
ReferenceError: Cannot access 'SET_PRODUCT_DEPARTMENTS' before initialization
But in this case everything good:
import { SET_PRODUCT_DEPARTMENTS } from '../actions/productActions';
const initialState = {
productDepartments: []
};
const productReducer = (state = initialState, action) => {
switch (action.type) {
case SET_PRODUCT_DEPARTMENTS:
return {
...state,
productDepartments: action.payload
};
default:
return state;
}
};
export default productReducer;
Tell me what was the problem between these two?

How can I send data i got from API into an object?

I'm trying to create a function add product into cart with redux-react
and how can I get my product info from mongoDB into initialState?
this is how my product info looks like:
img_url1: "https://thebeuter.com/wp-content/uploads/2020/06/38-1.jpg"
price: 1290000
title: "BEUTER BACK2BACK ZIPPER WHITE JACKET"
here is my reducer:
import {
ADD_PRODUCT_BASKET,
GET_NUMBERS_BASKET
} from '../actions/type'
const initialState = {
basketNumbers: 0,
cartCost: 0,
products: {
}
}
export default (state = initialState, action) => {
switch (action.type) {
case ADD_PRODUCT_BASKET:
let addQuantity = {
...state.products[action.payload]
}
console.log(addQuantity)
return {
...state,
basketNumbers: state.basketNumbers + 1,
};
case GET_NUMBERS_BASKET:
return {
...state
};
default:
return state;
}
}
Here is my github if you want to look at my code:
https://github.com/nathannewyen/the-beuter
You solve your problem using redux-saga (or redux-thunk) by fetching your data from DB before rendering your page:
productBasket.js (with redux-saga)
import axios from 'axios';
import { action as createAction } from 'typesafe-actions';
import {
put, select, takeLatest,
} from 'redux-saga/effects';
export const FETCH_PRODUCT_BASKET = 'FETCH_PRODUCT_BASKET';
export const FETCH_PRODUCT_BASKET_SUCCESS = 'FETCH_PRODUCT_BASKET_SUCCESS';
export const FETCH_PRODUCT_BASKET_ERROR = 'FETCH_PRODUCT_BASKET_ERROR';
export const actionCreators = {
fetchProductBasket: () =>
createAction(FETCH_PRODUCT_BASKET),
fetchProductBasketSuccess: (products) =>
createAction(FETCH_PRODUCT_BASKET_SUCCESS, { products }),
fetchProductBasketError: (error) =>
createAction(FETCH_PRODUCT_BASKET_ERROR, { error }),
};
export const {
fetchProductBasket,
fetchProductBasketSuccess,
fetchProductBasketError
} = actionCreators;
export const initialState = {
isFetching: false,
isError: false,
basketNumber: 0,
products: []
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case FETCH_PRODUCT_BASKET:
return {
...state,
isFetching: true,
isError: false
}
case FETCH_PRODUCT_BASKET_SUCCESS:
return {
...state,
isFetching: false,
isError: false,
products: action.payload.products
}
case FETCH_PRODUCT_BASKET_ERROR:
return {
...state,
isFetching: false,
isError: true
}
default:
return state;
}
}
export default reducer;
export function* basketSaga() {
yield takeLatest(FETCH_PRODUCT_BASKET, fetchProductBasketSaga);
}
function* fetchProductBasketSaga() {
try {
// here is code with fetching data
const { data } = yield axios.get('some address');
yield put(fetchProductBasketSuccess(data));
} catch (err) {
console.log(err);
yield put(fetchProductBasketError(err));
}
}
And after that dispatch fetchProductBasket action in useEffect scope in your component. You can show skeleton to user while your data is fetching.

Error when import my library on a project

I'm creating a library using create-react-library. My library uses typescript, hooks and redux.
I think that my problem is by typescript or hooks.. because I've tried different ways to export and always show same error.
./src/redux/RootReducer.tsx
Attempted import error: 'react-tree-library' does not contain a default export (imported as 'HierarchyTreeReducerState').
I've tried:
Use export const
// Export a variable
export const App = () => { ... }
// Import App in another file
import { App } from '...'
Use export default
// Export default
const App = () => { ... }
export default App
// Import App in another file
import App from "...";
// And this option
import { App } from "...";
As you can see:
const MainTree = ({
data,
portal,
branch,
...
}: MainProps) => { ... }
const mapStateToProps = createStructuredSelector({
branch: makeSelectBranchItem(),
hierarchy: makeSelectHierarchyItem(),
});
const mapDispatchToProps = (dispatch: Dispatch) => {
return {
...
dispatch,
};
}
const withConnect = connect(mapStateToProps, mapDispatchToProps);
export default compose(withConnect)(MainTree);
Reducers:
const HierarchyTreeReducerState = (state = initialState, action: any) => {
switch (action.type) {
case HierarchyTreeConstants.SET_SELECTED: {
return Object.assign({}, state, {
selected: action.payload,
});
}
case HierarchyTreeConstants.SET_DMA: {
return Object.assign({}, state, {
selectedDma: action.payload,
});
}
case HierarchyTreeConstants.SET_HIDDEN_BRANCHS: {
return Object.assign({}, state, {
hiddenBranchs: action.payload,
});
}
default:
return state;
}
};
export default HierarchyTreeReducerState;
const TreeReducerState = (state = initialState, action: any) => {
switch (action.type) {
case TreeConstants.SET_NUMBRANCHS: {
return Object.assign({}, state, {
numBranchs: action.payload
});
}
case TreeConstants.SET_BRANCH: {
return Object.assign({}, state, {
branchs: action.payload,
});
}
default:
return state;
}
};
export default TreeReducerState;
index.ts of Library:
export const TreeGoaiguaLibrary = ({
portal,
removeBranchWithChildren,
data,
}: Props) => {
return (
<Main
removeBranchWithChildren={removeBranchWithChildren}
data={data}
portal={portal}
/>
);
};
export { TreeGoaiguaLibrary , TreeReducer, HierarchyTreeReducer };
And when I do yarn link to library, I import in RootReducer of other project to use my library I do this:
import { combineReducers } from "redux";
import TreeReducerState from "react-goaigua-tree-library";
import HierarchyTreeReducerState from "react-goaigua-tree-library";
const combinedReducers = combineReducers({
branch: TreeReducerState,
hierarchy: HierarchyTreeReducerState,
} as any);
export const RootReducer = (state: any, action: never): any => {
return combinedReducers(state, action);
};
And show the error:
./src/redux/RootReducer.tsx
Attempted import error: 'react-tree-library' does not contain a default export (imported as 'HierarchyTreeReducerState').
I've solved ( I think )
index.ts of Library
import MainTree from "./components/main";
import HierarchyTreeReducerState from "./redux/reducers/HierarchyTreeReducer";
import TreeReducerState from "./redux/reducers/TreeReducer";
export { MainTree };
export default { TreeReducerState, HierarchyTreeReducerState };
Reducers:
export const HierarchyTreeReducerState = (state = initialState, action: any) => {
switch (action.type) {
case HierarchyTreeConstants.SET_SELECTED: {
return Object.assign({}, state, {
selected: action.payload,
});
}
case HierarchyTreeConstants.SET_DMA: {
return Object.assign({}, state, {
selectedDma: action.payload,
});
}
case HierarchyTreeConstants.SET_HIDDEN_BRANCHS: {
return Object.assign({}, state, {
hiddenBranchs: action.payload,
});
}
default:
return state;
}
};
export default HierarchyTreeReducerState;
export const TreeReducerState = (state = initialState, action: any) => {
switch (action.type) {
case TreeConstants.SET_NUMBRANCHS: {
return Object.assign({}, state, {
numBranchs: action.payload
});
}
case TreeConstants.SET_BRANCH: {
return Object.assign({}, state, {
branchs: action.payload,
});
}
default:
return state;
}
};
export default TreeReducerState;
Now show me this error:

splitting the actions and reducers into different files

I am trying to do an API call through reducer.My code is working fine here but the problem is all the actions, reducers are inside same file. So I tried to separate the reducer and actions in different file, but it is not working. I have debugged by putting some console.log but it is not helping me. Can anyone tell me how to fix it? I am providing my code snippet and sandbox below.
https://codesandbox.io/s/redux-async-actions-os6nu
import {
SELECT_CHANNEL,
REQUEST_POSTS,
RECEIVE_POSTS,
DISPLAY_ALERT
} from "../actions";
//const reducer = (state = {}, action) => {
const fetchReducer = (state = initialState, action) => {
switch (action.type) {
case FETCH_DATA_START:
return {
...state,
fetching: true,
fetchingMessage: "fetch data start"
};
case RECEIVED_DATA:
return {
...state,
fetching: false,
fetched: true,
data: action.payload,
fetchingMessage: "received data"
};
case FETCH_DATA_ERROR:
return {
...state,
fetching: false,
error: action.payload,
fetchingMessage: "fetch data error"
};
default:
return state;
}
};
export default fetchReducer;
You need to initialize your state in the main reducer file as well as use the same action name across all your application. I have also used mapStateToProps and mapDispatchToProps methods to make it easy and simple to use redux with react (https://redux.js.org/basics/usage-with-react).
Reducer file
import { combineReducers } from "redux";
import { REQUEST_POSTS, RECEIVE_POSTS } from "../actions";
const initialState = {
fetching: false,
fetched: false,
data: [],
error: null,
fetchingMessage: ""
};
const fetchReducer = (state = initialState, action) => {
switch (action.type) {
case REQUEST_POSTS:
return {
...state,
fetching: true,
fetchingMessage: "fetch data start"
};
case RECEIVE_POSTS:
return {
...state,
fetching: false,
fetched: true,
data: action.payload,
fetchingMessage: "received data"
};
case "FETCH_DATA_ERROR":
return {
...state,
fetching: false,
error: action.payload,
fetchingMessage: "fetch data error"
};
default:
return state;
}
};
export default combineReducers({ posts: fetchReducer });
App.js
const mapStateToProps = state => {
return {
data: state.posts
};
};
const mapDispatchToProps = dispatch => {
return {
onFetch: () => {
dispatch(requestPosts);
},
onFetchSuccess: data => {
dispatch(receivedPosts(data));
}
// onFetchError: () => {
// // dispatch()
// }
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);
Here is the working demo link forked from your CodeSandbox (https://codesandbox.io/s/redux-async-actions-436qu). Let me know if you do not understand anything.

export multiple variable in one reducer file REDUX

i want to ask how to export multiple const in 1 file reducers in redux
myreducers.js
import * as ActionTypes from '../actions/secone'
// PRODUCT TEMPLATE STATE
const productTemplate = (state={records:[], isFetching: false}, action) => {
switch (action.type) {
case ActionTypes.PRODUCT_TEMPLATE_REQUEST:
return { ...state, isFetching: true}
case ActionTypes.PRODUCT_TEMPLATE_SUCCESS:
return {
records: action.response,
isFetching: false,
}
default:
return state;
}
}
// PRODUCT ATTRIBUTE VALUES STATE
const productAttributeValues = (state={records:[], isFetching: false}, action) => {
switch (action.type) {
case ActionTypes.PRODUCT_ATTRIBUTE_VALUES_REQUEST:
return { ...state, isFetching: true}
case ActionTypes.PRODUCT_ATTRIBUTE_VALUES_SUCCESS:
return {
records: action.response,
isFetching: false,
}
default:
return state;
}
}
export default (productTemplate, productAttributeValues)
then how to import that reducers in main reducer that combine all the file,
what i did right now is to split ever const of my reducers in 1 file, and this is not efficient,
mainreducer.js
import { combineReducers } from 'redux'
import * as ActionTypes from '../actions/auth'
import authentication from './auth'
import productBrand from './secone'
import productTemplate from './product'
import resCity from './resCity'
import { routerReducer } from 'react-router-redux'
// Updates error message to notify about the failed fetches.
const errorMessage = (state = null, action) => {
const { type, error } = action
if (type === ActionTypes.RESET_ERROR_MESSAGE) {
return null
} else if (error) {
return action.error
}
return state
}
const rootReducer = combineReducers({
authentication,
errorMessage,
productTemplate,
// productAttributeValues,
productBrand,
resCity,
routing: routerReducer
})
export default rootReducer
I am not sure what you want to achive, but if your problem is to export more values from one file and import them to another file, the answer is not to use export default, but classic exports:
myreducers.js
export const productTemplate = (state={records:[], isFetching: false}, action) => { ... }
export const productAttributeValues = (state={records:[], isFetching: false}, action) => { ... }
and then import them
mainreducer.js
import { productTemplate, productAttributeValues } from "./myreducers" //fix the path
The difference between export and export default is very well described here: Typescript export vs. default export (does not matter the question is about TypeScript).

Resources