const phoneList = useSelector((state) => state.phoneListReducer.phoneList);
const [search, setSearch] = useState('');
const filteredPhoneList = useMemo(
() => phoneList.filter(phone => phone.includes(search)),
[search],
);прописать логику чата в redux мешая с логикой сервиса
или лучше реализовать это отдельным проетом, а потом подключить
Тоже самое касается и бэк части на node
Там так же пихать всё в роуты сервиса или можно декомпазировать ?
И есть 3 класса которые унаследуются от этого класса
export const getPriceColor = obj => dispatch => {
const res = getPriceColorApi(obj);
dispatch({
type: obj.name,
payload: res,
});
};Все работает и state меняется, но вот одна проблема, когда я меняю state вызывая функцию mosquitoNet то type экшена (например ADD_MOSQUITO ) приходит во все reducers и все остальные свойства state возвращаются в исходное состояние.
default:
return state;Как можно избежать этого
const action = value => (dispatch, getState) => {
const otherValue = otherValueSelector(getState());
const payload = calculate(value, otherValue);
dispatch(otherAction(payload));
};export const addTrack = (track) => store.dispatch({ type: ADD_TRACK, payload: { track } });я новичок в мире react. что я должен выучить чтобы полноценно знать React-Redux 2019 года.
Где можно найти информацию про Redux Hook ?
default:
return state;что делать в этом случае?
const mapDispatchToProps = dispatch => ({
getMovies: () => dispatch(getMoviesAction()),
getRecommendations: () => dispatch(getRecommendationsAction()),
});const mapDispatchToProps = {
getMovies: getMoviesAction,
getRecommendations: getRecommendationsAction,
};getMoviesAction ==> getMovies
getMovies ==> getMoviesSucceededconst mapDispatchToProps = {
getMovies,
getRecommendations,
};const Foo = ({ dispatch }) => {
const handler = useCallback(() => {
dispatch(action());
}, []);
return (
<Bar onClick={handler} />
);
};
export default connect()(Foo);const Foo = () => {
const dispatch = useDispatch();
const handler = useCallback(() => {
dispatch(action());
}, []);
return (
<Bar onClick={handler} />
);
};
export default Foo;const Foo = ({ value }) => {
return (
<Bar value={value} />
);
};
const mapStateToProps = state => ({
value: state.value,
});
export default connect(mapStateToProps)(Foo);const Foo = () => {
const value = useSelector(state => state.value);
return (
<Bar value={value} />
);
};
export default Foo;const valueSelector = state => state.value;
const Foo = () => {
const { dispatch, getState, subscribe } = useStore();
const value = valueSelector(getState());
useEffect(() => subscribe(console.log), []);
const handler = useCallback(() => {
dispatch(action());
}, []);
return (
<Bar onClick={handler} value={value} />
);
};
export default Foo;import React, { useCallback, useRef } from 'react';
import ReactDOM from 'react-dom';
import { combineReducers, createStore } from 'redux';
import { Provider, connect } from 'react-redux';
// action type
const ADD_MESSAGE = 'ADD_MESSAGE';
// action creator
const addMessage = payload => ({
type: ADD_MESSAGE,
payload,
});
// reducer
const messages = (state = [], action) => {
switch (action.type) {
case ADD_MESSAGE:
return [...state, action.payload];
default:
return state;
}
};
// root reducer
const rootReducer = combineReducers({
messages,
});
// store
const store = createStore(rootReducer);
const App = ({ addMessage, messages }) => {
const inputRef = useRef(null);
const handler = useCallback(() => {
addMessage(inputRef.current.value);
inputRef.current.value = '';
}, [inputRef, addMessage]);
return (
<div>
<ul>
{messages.map((message, i) => (
<li key={i}>{message}</li>
))}
</ul>
<input ref={inputRef} />
<button onClick={handler}>Add Message</button>
</div>
);
};
const mapStateToProps = state => ({
messages: state.messages,
});
const mapDispatchToProps = {
addMessage,
};
const ConnectedApp = connect(
mapStateToProps,
mapDispatchToProps
)(App);
const root = (
<Provider store={store}>
<ConnectedApp />
</Provider>
);
const rootElement = document.getElementById('root');
ReactDOM.render(root, rootElement);import React, { useCallback, useRef } from 'react';
import ReactDOM from 'react-dom';
import { combineReducers, createStore } from 'redux';
import { Provider, connect } from 'react-redux';
import { createAction, createReducer } from 'redux-act';
// action creator
const addMessage = createAction('ADD_MESSAGE');
// reducer
const messages = createReducer({}, []);
messages.on(addMessage, (state, message) => [...state, message]);
// root reducer
const rootReducer = combineReducers({
messages,
});
// store
const store = createStore(rootReducer);
const App = ({ addMessage, messages }) => {
const inputRef = useRef(null);
const handler = useCallback(() => {
addMessage(inputRef.current.value);
inputRef.current.value = '';
}, [inputRef, addMessage]);
return (
<div>
<ul>
{messages.map((message, i) => (
<li key={i}>{message}</li>
))}
</ul>
<input ref={inputRef} />
<button onClick={handler}>Add Message</button>
</div>
);
};
const mapStateToProps = state => ({
messages: state.messages,
});
const mapDispatchToProps = {
addMessage,
};
const ConnectedApp = connect(
mapStateToProps,
mapDispatchToProps,
)(App);
const root = (
<Provider store={store}>
<ConnectedApp />
</Provider>
);
const rootElement = document.getElementById('root');
ReactDOM.render(root, rootElement);В данном примере curPrice - это props получаемые от сервера
Поэтому чтобы записать State - приходится делать дополнительную проверку,
которую я нигде в примерах не встречал - это правильно?..
{
isFetching: {
'ALL': false,
'122bc-e43gf-24002-12ea1-ca785': true,
},
}
хотелось бы получить что-то подобное