Подскажите пожалуйста, как изменение данных в Redux вызывают ререндер того компонента где эти данные используются?
Смотрел как устроена работа Redux в видео "https://youtu.be/sLCfWSle5Jw?si=8b2M6WBCMzdgp1cL", но там не рассказывают о том как вызывается ререндер компонента после изменения данных.
Вот весь код из видео:
const createStore = (reducer) => {
let state = reducer(undefined, { type: '__INIT__' });
let subscribers = [];
return {
getState: () => state,
dispatch: action => {
state = reducer(state, action);
subscribers.forEach(cb => cb());
},
subscribe: (cb) => subscribers.push(cb),
};
};
const initialState = {
count: 0,
};
const INCREMENT = 'INCREMENT';
const increment = count => ({
type: INCREMENT,
payload: count,
});
const countReducer = (state = initialState, action) => {
switch (action.type) {
case INCREMENT:
return {
...state,
count: state.count + action.payload,
};
case 'DECREMENT':
return {
...state,
count: state.count - action.payload,
};
default:
return {
...state,
};
}
};
const initialUSerState = {
users: [],
};
const userReducer = (state = initialUSerState, action) => {
switch (action.type) {
case 'SUCCESS':
return {
...state,
users: action.payload,
};
default:
return {
...state,
};
}
};
// const reducer = (state, action) => {
// return {
// userState: userReducer(state.userState, action),
// countState: countReducer(state.countState, action),
// };
// };
const combineRedcuers = (reducersMap) => {
return (state, action) => {
const nextState = {};
Object.entries(reducersMap).forEach(([key, reducer]) => {
nextState[key] = reducer(state ? state[key] : state, action);
});
return nextState;
};
};
const rootReducer = combineRedcuers({ userState: userReducer, countState: countReducer });
// const store = createStore(rootReducer);
// console.log(store.getState());
// // store.subscribe(() => console.log('change'));
// store.dispatch(increment(3));
// store.dispatch({ type: 'DECREMENT', payload: 1 });
// store.dispatch({ type: 'SUCCESS', payload: [{ name: 'user' }] });
// console.log(store.getState());
const logger = store => dispatch => action => {
console.log(action.type);
}
const thunk = store => dispatch => action => {
if (typeof action === 'function') {
return action(store.dispatch, store.getState);
}
return dispatch(action);
};
const applyMiddleware = (middleware) => {
return (createStore) => {
return (reducer) => {
const store = createStore(reducer);
return {
dispatch: action => middleware(store)(store.dispatch)(action),
getState: store.getState,
}
}
}
};
const init = {
isLoading: false,
}
const reducerNew = (state = init, action) => {
switch (action.type) {
case 'STARTED':
return {
...state,
isLoading: true,
};
case 'SUCCESS':
return {
...state,
isLoading: false,
};
default:
return {
...state,
}
}
}
const someAction = () => {
return async (dispatch) => {
dispatch({ type: 'STARTED' });
await new Promise(resolve => setTimeout(() => resolve(), 2000));
dispatch({ type: 'SUCCESS' });
}
}
const createStoreWithMiddleware = applyMiddleware(logger)(createStore);
const storeWithMiddle = createStoreWithMiddleware(reducerNew);
console.log(storeWithMiddle.getState());
storeWithMiddle.dispatch({ type: 'SUCCESS' });
console.log(storeWithMiddle.getState());
setTimeout(() => {
console.log(storeWithMiddle.getState());
}, 5000);
