B
Эт отолько для демонтстрации
Size: a a a
2019 August 08
DB
Можете обьяснить почему в enzyme мне нужно вызывать wrapper.update() чтобы в компоненте поменялся стейт?
Потому что enzyme так стал работать при апдейте с 2 до 3 и она знает, что надо обновиться только по определённым событиям, типа ты делаешь
то он уже не знает и ему надо подсказывать
.simulate('click'). А если ты где-то делаешь setTimeout(() => setState(), 1000)
то он уже не знает и ему надо подсказывать
B
Потому что enzyme так стал работать при апдейте с 2 до 3 и она знает, что надо обновиться только по определённым событиям, типа ты делаешь
то он уже не знает и ему надо подсказывать
.simulate('click'). А если ты где-то делаешь setTimeout(() => setState(), 1000)
то он уже не знает и ему надо подсказывать
так получается апдейт нужно делать всегда, если был сетстейт?
DB
Не всегда, а когда он делается асинхронно без какого-то пользовательского инпута и когда enzyme не смог сам этого понять
DB
Maxim Kovalenko
За ответ спасибо.
По задумке прийдет с сервера масив компонентов который нужно отрисовать , какой масив прийдет я не знаю , т.к. права у пользователей на эти компоненты будут разными , а "item.name" обзятельное условие ответа сервера
По задумке прийдет с сервера масив компонентов который нужно отрисовать , какой масив прийдет я не знаю , т.к. права у пользователей на эти компоненты будут разными , а "item.name" обзятельное условие ответа сервера
На клиенте можно иметь мапу соответствий этим именам на ссылку компонента:
response:
map:
co
const Component = componentsMap[item.name];
return <Component/>
response:
[
{
name: 'myComponent'
}
]
map:
co
nst componentsMap = {
myComponent: MyComponent
}
И там где рендеришь делаешьconst Component = componentsMap[item.name];
return <Component/>
MK
На клиенте можно иметь мапу соответствий этим именам на ссылку компонента:
response:
map:
co
const Component = componentsMap[item.name];
return <Component/>
response:
[
{
name: 'myComponent'
}
]
map:
co
nst componentsMap = {
myComponent: MyComponent
}
И там где рендеришь делаешьconst Component = componentsMap[item.name];
return <Component/>
Не плохо , спасибо )
V
ребят, привет. как правильно в саге записать сереализированные данные в локал сторедж, когда юзер залогинился:
вот мой код: https://gist.github.com/frontvin/c627ad04465467146072b1a743c615c4
файл: saga.tsx
вот мой код: https://gist.github.com/frontvin/c627ad04465467146072b1a743c615c4
файл: saga.tsx
VO
ребят подскажите может уже кто то делал Drag and Drop меню такого типа, есть ли какие то решения стабильные?
LK
ребят а как можно в сагах сделать стрктуру аля redux-thunk
export function async<T, P>(
type: T,
action: (...args: any[]) => Promise<P>,
...args: any
) {
return async (dispatch: any) => {
function startedAsyncAction() {
dispatch({
type: `${type}_${AsyncActionStatus.STARTED}`,
status: AsyncActionStatus.STARTED,
});
}
function succeededAsyncAction(payload: any) {
dispatch({
type: `${type}_${AsyncActionStatus.SUCCEEDED}`,
status: AsyncActionStatus.SUCCEEDED,
payload,
});
return payload;
}
function failedAsyncAction(payload: any) {
dispatch({
type: `${type}_${AsyncActionStatus.FAILED}`,
status: AsyncActionStatus.FAILED,
payload,
});
return payload;
}
startedAsyncAction();
try {
const payload = await action(...args);
return succeededAsyncAction(payload);
} catch (error) {
return failedAsyncAction(error);
}
};
}
LK
я хочу по сути создать некий темплейт, тоесть я создаю некую функцию которая принимает тип,колбек и аргументы а сага уже дектетит
LK
start,success,error
LK
просто у меня сейчас заминка возникла с тем что в саге можно сдеать аля такое
function* asyncSaga(user) {
while (true) {
try {
yield put({ type: "USER_FETCH_SUCCEEDED", user: user });
} catch (e) {
yield put({ type: "USER_FETCH_FAILED", message: e.message });
}
}
}
function* root() {
yield takeLatest("USER_FETCH_REQUESTED", asyncSaga);
}LK
но это не очень поскольку я тут явно прописываю тип
LK
а я хочу принимать все аргументы из вне
2019 August 09
KB
Всем привет! Раньше не доходили руки особо поиграться с хуками побольше, вот столкнулся и думаю не сильно ли усложняю. Есть хук в котором используется сервис для подгрузки данных, он возвращается стейт который апйдейтится при помощи
useRedux и fetch, который к примеру буду вызывать в useEffect какого-то компонента.KB
export const useGiphyService = limit => {
const [state, dispatch] = useReducer(gifsReducer, initialState);
const fetch = useCallback(
async (query, offset = 0, isIncremental = false) => {
if (!query) {
return dispatch({
type: FETCH_NEW_GIFS_SUCCESS,
data: [],
isLastPage: true
});
}
dispatch({
type: isIncremental ? FETCH_MORE_GIFS_REQUEST : FETCH_NEW_GIFS_REQUEST
});
try {
const {
data,
pagination: { total_count, offset: newOffset, count }
} = await searchGifs({ query, limit, offset });
const isLastPage = total_count - newOffset <= count;
dispatch({
type: isIncremental
? FETCH_MORE_GIFS_SUCCESS
: FETCH_NEW_GIFS_SUCCESS,
data,
isLastPage
});
} catch {
dispatch({
type: isIncremental ? FETCH_MORE_GIFS_FAILURE : FETCH_NEW_GIFS_FAILURE
});
}
},
[limit]
);
return { state, fetch };
};KB
Чисто интересно не попахивает ли вам этот код?
TS
export const useGiphyService = limit => {
const [state, dispatch] = useReducer(gifsReducer, initialState);
const fetch = useCallback(
async (query, offset = 0, isIncremental = false) => {
if (!query) {
return dispatch({
type: FETCH_NEW_GIFS_SUCCESS,
data: [],
isLastPage: true
});
}
dispatch({
type: isIncremental ? FETCH_MORE_GIFS_REQUEST : FETCH_NEW_GIFS_REQUEST
});
try {
const {
data,
pagination: { total_count, offset: newOffset, count }
} = await searchGifs({ query, limit, offset });
const isLastPage = total_count - newOffset <= count;
dispatch({
type: isIncremental
? FETCH_MORE_GIFS_SUCCESS
: FETCH_NEW_GIFS_SUCCESS,
data,
isLastPage
});
} catch {
dispatch({
type: isIncremental ? FETCH_MORE_GIFS_FAILURE : FETCH_NEW_GIFS_FAILURE
});
}
},
[limit]
);
return { state, fetch };
};Раз хуки то не означає що не треба мутити нормальні екшени
KB
нормальные это какие?