const createAsyncReducer (state, action) => {
switch (action.type) {
case "USER_REQUEST":
return {
...state,
isFetching: true
}
case "USER_SUCCESS":
return {
...state,
isFetching: false,
data: action.payload,
error: void 0,
}
case "USER_FAILURE":
return {
...state,
isFetching: false,
error: action.payload
}
case "USER_SOME_ACTION":
return {
...state,
isFetching: false,
error: action.payload.some
}
default: return state;
}
}
const createAsyncReducer = (constants) => (state, action) => {
switch (action.type) {
case constants[0]:
return {
...state,
isFetching: true
}
case constants[1]:
return {
...state,
isFetching: false,
data: action.payload,
error: void 0,
}
case constants[2]:
return {
...state,
isFetching: false,
error: action.payload
}
default: return state;
}
}
const todosReducer = createAsyncReducer([
"TODOS_REQUEST",
"TODOS_SUCCESS",
"TODOS_FAILURE"
]);
const withAddTodo = reducer => (state, action) => {
const nextState = reducer(state, action);
switch (action.type) {
case "ADD_TODO":
return {
...nextState,
data: [...nextState.data, action.payload]
};
default:
return nextState;
}
};
const customReducer = withAddTodo(todosReducer);
const store = createStore({ counter: 0 });
const getState = store.getState;
const setState = store.setState;
const increment = () => {
setState({
type: 'counter',
counter: getState().counter + 1,
});
};
increment();
const store = createStore({ counter2: { value: 0 } });
const getState = store.getState;
const setState = store.setState;
const increment2 = () => {
const { value } = getState().counter2;
setState({
type: 'counter2',
counter2: {
value: value + 1,
},
});
};
increment2();
const createAsyncReducer (state, action) => {
switch (action.type) {
case "USER_REQUEST":
return {
...state,
edit: {
...state.edit,
isFetching: true,
}
}
case "USER_SUCCESS":
return {
...state,
edit: {
...state.edit,
isFetching: false,
data: action.payload,
error: void 0,
}
}
case "USER_FAILURE":
return {
...state,
edit: {
...state.edit,
isFetching: false,
error: action.payload
}
}
case "USER_SOME_ACTION":
return {
...state,
edit: {
...state.edit,
isFetching: false,
error: action.payload.some
}
}
case "USER_REQUEST2":
return {
...state,
delete: {
...state.delete,
isFetching: true,
}
}
case "USER_SUCCESS2":
return {
...state,
delete: {
...state.delete,
isFetching: false,
data: action.payload,
error: void 0,
}
}
case "USER_FAILURE2":
return {
...state,
delete: {
...state.delete,
isFetching: false,
error: action.payload
}
}
case "USER_SOME_ACTION2":
return {
...state,
delete: {
...state.delete,
isFetching: false,
error: action.payload.some
}
}
default: return state;
}
}
delete: {
...state.delete,
isFetching: false,
error: action.payload.some
}
это в продакшене в двух проектах? Не смешите. Вы же написали это в середине декабря.
При этом, эта шляпа даже не работает.
import createStore from 'redux-light';
var createStore = require('redux-light').default;
1.Зачем тут вообще redux?
2. Зачем тут типы действий?
3. Как правильно получить текущее состояние?
let state = store.getState()
getState().some.path.somePath2.somePath3;
const todosReducer = createAsyncReducer([
"TODOS_REQUEST",
"TODOS_SUCCESS",
"TODOS_FAILURE"
]);
const todosReducer2 = createAsyncReducer([
"TODOS_REQUEST2",
"TODOS_SUCCESS2",
"TODOS_FAILURE2"
]);
const withAddTodo = reducer => (state, action) => {
const nextState = reducer(state, action);
switch (action.type) {
case "ADD_TODO":
return {
...nextState,
data: [...nextState.data, action.payload]
};
default:
return nextState;
}
};
const customReducer = withAddTodo(todosReducer);
// надо в customReducer записать todosReducer2
// users.js
async function getUser(id) {
await helper.load({
type: 'GET_USER',
func: () => api.getUser(id),
rootProp: 'users'
});
}
async function editUser(id, value) {
await helper.load({
type: 'EDIT_USER',
func: () => api.editUser(id, value),
rootProp: 'users'
});
}
// helpers.js
async function load({ type, func, rootProp, loadingProp = 'isFetching', resultProp='data', errorProp='error' }) {
if (getState()[rootProp][loadingProp]) return;
setState({
type: type + '_STARTED',
[rootProp]: { [loadingProp]: true }
});
let data;
try {
data = await func();
}
catch (error) {
setState({
type: type + '_ERROR',
[rootProp]: {
[loadingProp]: false,
[errorProp]: error
}
});
return;
}
setState({
type: type + '_SUCCESS',
[rootProp]: {
[loadingProp]: false,
[resultProp]: data
}
});
}
const {
reducer,
saga,
actions,
selectors,
api,
actionTypes,
} = generateCrudBoilerplate(
'products',
{
getList: () => `/api/products`,
getOne: id => `/api/product/${id}`,
add: payload => `/api/product/`,
remove: id => `/api/product/${id}`,
edit: (id, payload) => `/api/product/${id)`,
}
);
Моя ошибка, невнимательность. Написал полную бурду.
import { combineReducers } from 'redux';
const createAsyncReducer = entityName => (state, action) => {
const { type, payload } = action;
switch (type) {
case entityName + '_REQUEST':
return {
...state,
isFetching: true,
};
case entityName + '_SUCCESS':
return {
...state,
isFetching: false,
data: payload,
error: null,
};
case entityName + '_FAILURE':
return {
...state,
isFetching: false,
error: payload,
};
default: return state;
}
}
const todoReducer = withTodo(createAsyncReducer('TODO'));
const todoReducer2 = createAsyncReducer('TODO2');
export const customReducer = combineReducers({
todoReducer,
todoReducer2,
});
export const getIsLoadedSelector = ({ reducer }) => reducer.delete.isLoaded;
export const getIsLoadedSelector = ({ apps }) =>
customReducer.todoReducer.delete.isLoaded;
export const getIsLoadedSelector2 = ({ apps }) =>
customReducer.todoReducer2.delete.isLoaded;