const initialState = {
result: [], // list of ids
data: {}, // map by id
}
export const placesReducer = (state, { type, payload }) => {
switch (type) {
case 'PLACES_LOAD_SUCCESS':
return {
...state,
// псевдокод, можно использовать https://github.com/paularmstrong/normalizr
result: payload.map(id),
data: payload.reduce(keyById),
}
}
}
// по этому результату делаете .map
export const getPlaces = state => state.places.result
// этот селектор будет дергать каждый Place, только ему нынче кидайте не place={place}, а id={id}, ибо .map по идентификаторам идёт
export const getPlace = (state, id) => state.places.data[id];
--- internal tick
- componentDidMount
- asyncStorage.getItem
- console.log // на этот момент мы ещё не попали в then
--- internal tick
- then блок
- setState
const SignIn = ({ isAuth }) => {
useEffect(() => {
if (isAuth) {
history.push('/')
}
}, [isAuth])
}
<Route ... component={SignIn} />
=> props.historyМне нужно динамически назначать порт для внутренних запросов к серверу в моем production билде, так как заранее я не могу точно знать на каком порту будет запущено мое приложение, есть ли возможность динамически считывать значение извне и использовать его на лету в моем продакшн билде?
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [value, setValue] = React.useState("");
const [hidden, setHidden] = React.useState("");
const ref = React.useRef();
function onInput(event) {
setValue(event.target.value);
}
React.useEffect(() => {
const observer = new MutationObserver(list => {
for (const mutation of list) {
if (mutation.attributeName === "value") {
setHidden(ref.current.value);
}
}
});
observer.observe(ref.current, {
attributes: true
});
return () => {
observer.disconnect();
};
}, []);
return (
<div className="App">
<div>Hidden: {hidden}</div>
<input type="text" value={value} onInput={onInput} />
<input type="hidden" value={value} ref={ref} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);