We Keep Coding

How do I have a copy of a variable in a React functional component that doesn't change?

I have a variable const foo: Array<ObjectExt> = useSelector(fooSelector); in a functional component. I want a copy of this variable from the first time the component is loaded that does not change when foo does.
When working with class components, I could simply have const fooCopy = foo.slice(); but that does not work here since the component reloads every time and fooCopy changes.
How do I achieve this in a functional component?

Just useState with the initial value as a copy of foo.
const foo : Array<ObjectExt> = useSelector(fooSelector);
const [origFoo] = useState(foo.slice());
Once origFoo has been initialized, it won't be re-initialized on rerender. You can destructure the setter out if you need to update its value later:
const [origFoo, setOrigFoo] = useState(foo);
// ...
if(someCondition) setOrigFoo(foo.slice())
const {useState} = React;
function App() {
const foo = [new Date().getTime()];
const [origFoo] = useState(foo.slice());
// Just so we have a way to force a rerender
const [count, setCount] = React.useState(0);
return (
<div>
<p>{JSON.stringify(foo)} </p>
<p>{JSON.stringify(origFoo)}</p>
<button onClick={() => setCount(count + 1)}>Update</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<App />,
rootElement
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

One solution is to set a flag in local component state. If that flag is fals, then make a copy of the value. Otherwise, don't.

The solution I'd use to accomplish this functionality, is to make a copy of foo, something like initialFoo in the store, and pick it in needed components.

I want a copy of this variable from the first time the component is loaded that does not change when foo does.
When you use useSelector(selector) then react-redux will run selector every time the state changes, if the return value is different than then last time it ran then react-redux will re render the component.
The easiest way of doing this is using a selector that returns only the value it got when called the first time:
const { Provider, useDispatch, useSelector } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const initialState = { count: 0 };
//action types
const ADD = 'ADD';
//action creators
const add = () => ({
type: ADD,
});
const reducer = (state, { type, payload }) => {
if (type === ADD) {
return { ...state, count: state.count + 1 };
}
return state;
};
//selectors
const selectCount = (state) => state.count;
//function returning a function
const createSelectInitialCount = () => {
//initialize NONE when createSelectInitialCount is called
const NONE = {};
let last = NONE;
//return the selector
return (state) => {
//check if last value was set
if (last === NONE) {
//set last value (only when called the first time)
last = selectCount(state);
}
return last;
};
};
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware(() => (next) => (action) =>
next(action)
)
)
);
const InitialFoo = React.memo(function InitialFoo(props) {
const selectInitialCount = React.useMemo(//can also use useCallback
createSelectInitialCount,//createSelectInitialCount() if you use useCallback
[]
);
const foo = useSelector(selectInitialCount);
return (
<div>
<h3>initialfoo</h3>
<pre>
{JSON.stringify({ ...props, foo }, undefined, 2)}
</pre>
</div>
);
});
const App = () => {
const foo = useSelector(selectCount);
const dispatch = useDispatch();
const [other, setOther] = React.useState(0);
const [showFoo, setShowFoo] = React.useState(true);
const remountFoo = () => {
setShowFoo(false);
Promise.resolve().then(() => setShowFoo(true));
};
return (
<div>
<button onClick={() => dispatch(add())}>
foo:{foo}
</button>
<button onClick={() => setOther((o) => o + 1)}>
other{other}
</button>
<button onClick={remountFoo}>remount Foo</button>
{showFoo && <InitialFoo other={other} />}
</div>
);
};
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root"></div>
Another way is to create a pure component using React.memo with a custom compare function that ignores foo:
const { Provider, useDispatch, useSelector } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const initialState = { count: 0 };
//action types
const ADD = 'ADD';
//action creators
const add = () => ({
type: ADD,
});
const reducer = (state, { type, payload }) => {
if (type === ADD) {
return { ...state, count: state.count + 1 };
}
return state;
};
//selectors
const selectCount = (state) => state.count;
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware(() => (next) => (action) =>
next(action)
)
)
);
const InitialFoo = React.memo(
function InitialFoo(props) {
return (
<div>
<h3>initialfoo</h3>
<pre>{JSON.stringify(props, undefined, 2)}</pre>
</div>
);
},
//custom compare function when returning false
// component will re render
({ other }, { other: newOther }) => {
return other === newOther;
}
);
const InitialFooContainer = (props) => {
const foo = useSelector(selectCount);
//store foo in ref, will never change after mount
const fooRef = React.useRef(foo);
const newProps = { ...props, foo: fooRef.current };
return <InitialFoo {...newProps} />;
};
const App = () => {
const foo = useSelector(selectCount);
const dispatch = useDispatch();
const [other, setOther] = React.useState(0);
const [showFoo, setShowFoo] = React.useState(true);
const remountFoo = () => {
setShowFoo(false);
Promise.resolve().then(() => setShowFoo(true));
};
return (
<div>
<button onClick={() => dispatch(add())}>
foo:{foo}
</button>
<button onClick={() => setOther((o) => o + 1)}>
other{other}
</button>
<button onClick={remountFoo}>remount Foo</button>
{showFoo && (
<InitialFooContainer foo={foo} other={other} />
)}
</div>
);
};
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root"></div>

Redux action no longer works when defining mapDispatchToProps As A Function

In a container, I've been using the "object shorthand" form of mapDispatchToProps to make available a single redux action (initialized as createRoutine from redux-actions) in an event handler:
const mapDispatchToProps = {
validateAddress,
}
In the handler, the action appears in this form:
function () { return dispatch(actionCreator.apply(this, arguments));}
All good. But when instead I define mapDispatchToProps as a function, so that I can add other actions that need access to dispatch, like so...
const mapDispatchToProps = (dispatch) => {
return {
validateAddress: () => dispatch(validateAddress()),
newAction1: .......,
newAction2: .......,
}
}
...my original action, validateAddress, ceases to work and appears now in this form instead:
function validateAddress() {
return dispatch(Object(_core_address_module__WEBPACK_IMPORTED_MODULE_9__["validateAddress"])());
}
I'm not sure why this is happening or how to restore the functionality of my original action. Any ideas? Thanks.

Your action creators such as validateAddress should return an object or a function that receives dispatch and getState functions for thunk actions.
Here is a working example:
const { Provider } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const initialState = {
validateAddress: 0,
};
//action types
const VALIDATE_ADDRESS = 'VALIDATE_ADDRESS';
//action creators
function validateAddress() {
return { type: VALIDATE_ADDRESS };
}
const reducer = (state, { type }) => {
if (type === VALIDATE_ADDRESS) {
return {
...state,
validateAddress: state.validateAddress + 1,
};
}
return state;
};
//selectors
const selectValidateAddress = (state) =>
state.validateAddress;
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware(() => (next) => (action) =>
next(action)
)
)
);
const App = ({ validateAddress, actionCalled }) => {
return (
<button onClick={validateAddress}>
call action, called {actionCalled} times
</button>
);
};
const mapDispatchToProps = (dispatch) => {
return {
validateAddress: () => dispatch(validateAddress()),
};
};
const mapStateToProps = (state) => ({
actionCalled: selectValidateAddress(state),
});
const AppContainer = ReactRedux.connect(
mapStateToProps,
mapDispatchToProps
)(App);
ReactDOM.render(
<Provider store={store}>
<AppContainer />
</Provider>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root"></div>

How to handle props too slow to update?

Wrote a React Hooks component that renders randomly selected quotes from Redux.
I'm struggling to read the quote from props in the first render (had to write a switch statement in JSX to read from the local React component state on first render instead).
All fine to read from props when one clicks on the button to get a new random quote (i.e. much after the first render). Guess props is too slow to update.
Pointers on how to deal with it most welcome. What I've done is more of a hack as I'm not reading from the Redux store at all on first render.
const defaultState = {};
const NEW_QUOTE = "NEW_QUOTE"
const newQuoteActionCreator = (quoteObject) => {
return {
type: NEW_QUOTE,
payload: quoteObject
};
};
const getNextQuoteReducer = (state = defaultState, action) => {
switch (action.type) {
case NEW_QUOTE:
return {
...state,
data: action.payload
};
default:
return state;
}
};
const store = Redux.createStore(getNextQuoteReducer);
const quotes = [
{
quoteText:"\"AAAAAA.\"",
quoteAuthor:"BBBB",
},
{
quoteText:"\"CCCCC.\"",
quoteAuthor:"DDDD",
}
];
React bit:
const QuoteBox = ({ text, author }) => { //destructuring
return (
<React.Fragment>
<div className="quotable-square">
<div className="content">
<div id="text">{text}</div>
<div id="author" className="author">{author}</div>
</div>
</div>
</React.Fragment>
)
}
const Button = ({ onClick, title }) => {
return (
<button className="new-quote" onClick={onClick}>{title}</button>
)
}
const App = (props) => {
const [quote, setQuote] = React.useState(() => {
const initialQuote = quotes[Math.floor(Math.random() * quotes.length)];
return {
data: initialQuote
}
});
const chosenRandomQuoteToState = () => {
let chosenQuote = randomQuoteFunction(quotes);
props.selectNewQuote(chosenQuote);
}
return (
<React.Fragment>
<div className="container">
<div id="quote-box">
<QuoteBox text={(() => {
switch (typeof props.currentQuote.data) {
case "undefined": return quote.data.quoteText
default: return props.currentQuote.data.quoteText;
}
})()}/>
<div className="actions">
<Button id="new-quote" title="Get New Quote" onClick={chosenRandomQuoteToState} />
</div>
</div>
</div>
</React.Fragment>
)
}
React Redux bit:
const Provider = ReactRedux.Provider;
const mapStateToProps = (state) => {
return {
currentQuote: state
}
const mapDispatchToProps = (dispatch) => {
return {
selectNewQuote: function(quoteToBeNewQuote) {
dispatch(newQuoteActionCreator(quoteToBeNewQuote));
}
}
}
const connect = ReactRedux.connect
const Container = connect(mapStateToProps, mapDispatchToProps)(App);
const AppWrapper = () => {
return (
<Provider store= {store}>
<Container />
</Provider>
);
};
ReactDOM.render(<AppWrapper />, document.getElementById('app'));
Newbie, so be easy on me :)

Try something like this:
const initialState = {
quotes: [
{
quoteText: '"AAAAAA."',
quoteAuthor: 'BBBB',
},
{
quoteText: '"CCCCC."',
quoteAuthor: 'DDDD',
},
],
}; //renamed defaultState
const mapStateToProps = state => {
//state should hold data, container (map state) should
// create values based on that data
const { quotes } = state;
return {
currentQuote:
quotes[Math.floor(Math.random() * quotes.length)],
};
};
const mapDispatchToProps = dispatch => ({
selectNewQuote: dispatch(newQuoteActionCreator()),
});
const getNextQuoteReducer = (
state = defaultState,
action
) => {
switch (action.type) {
case NEW_QUOTE:
return {
...state,
quotes: [...state.quotes], //forces app container to re run
};
default:
return state;
}
};
And get rid of useState in your components as well as all complex logic with your action, the action only needs a type and your reducer will re refernce quites so App container will re run and pick another random quote.

Rather than messing with extra state in your component, you should go all-in with letting redux manage the state of the current quote. Since you want a random quote selected in your store at the very start, you could pre-select a random quote selection in your store's initial state or dispatch the selection of a random quote as an effect so it happens on mount. Here's the latter approach:
const App = (props) => {
useEffect(() => {
chosenRandomQuoteToState();
}, []);
const chosenRandomQuoteToState = () => {
let chosenQuote = randomQuoteFunction(quotes);
props.selectNewQuote(chosenQuote);
};
const currentQuote = props.currentQuote.data;
return (
<React.Fragment>
<div className="container">
<div id="quote-box">
{currentQuote && <QuoteBox text={currentQuote}/>}
<div className="actions">
<Button id="new-quote" title="Get New Quote" onClick={chosenRandomQuoteToState} />
</div>
</div>
</div>
</React.Fragment>
)
}

Redux props not working

Hi I'm trying Redux recently. I wanted to build a counter for practice.
It's composed of two buttons(plus & minus) and a counter showing the current number.
The action creators and reducers are connected to the corresponding components. The store is also connected to the provider. Yet I don't know why but the initial number(state passed as props to the counter component) is not showing?
Codepen
Javascript:
/*--Reducers--*/
const reducer_num = (state=0,action)=>{
switch(action.type){
case "PLUS":
case "MINUS":
     return state + action.payload;
default:
return state;
}
}
const rootReducer = Redux.combineReducers({
num: reducer_num
});
/*--Action creators--*/
const action_plus = ()=>{
return {
type: "PLUS",
payload: 1
};
}
const action_minus = ()=>{
return {
type: "MINUS",
payload: -1
};
}
/*--Components & containers--*/
//counter
const Counter = (props)=>{
return (<div className="counter">{props.num}</div>);
}
const mapStateToProps=(state)=>{
return {num: state.num};
}
ReactRedux.connect(mapStateToProps)(Counter);
//plus
const Plus = (props)=>{
 return (<div className="plus" onClick={props.plus}>+</div>);
}
const mapDispatchToProps_plus = (dispatch)=>{
return Redux.bindActionCreators({plus: action_plus},dispatch);
}
ReactRedux.connect(mapDispatchToProps_plus)(Plus);
//minus
const Minus = (props)=>{
return (<div onClick={props.minus} className="minus">-</div>);
}
const mapDispatchToProps_minus = (dispatch)=>{
return Redux.bindActionCreators({minus: action_minus},dispatch);
}
ReactRedux.connect(mapDispatchToProps_minus)(Minus);
// Provider & store
const Provider = ReactRedux.Provider,
store = Redux.createStore(rootReducer);
//App
const App = ()=>{
return (
<Provider store={store}>
<div className="container">
<Plus/>
<Counter/>
<Minus/>
</div>
</Provider>
);
}
ReactDOM.render(<App/>,document.body);
Many thanks for any help.

There were a few issues with your code,
First: mapDispatchToProps is second argument to connect function and when you don't have a mapStateToProps function, you need to pass the first argument as null
Second: connect returns a Component connected to the store that you need to make use of but you are not using that
Complete Code:
/*--Reducers--*/
const reducer_num = (state=0,action)=>{
switch(action.type){
case "PLUS":
case "MINUS":
console.log(action.type)
     return state + action.payload;
default:
return state;
}
}
const rootReducer = Redux.combineReducers({
num: reducer_num
});
/*--Action creators--*/
const action_plus = ()=>{
return {
type: "PLUS",
payload: 1
};
}
const action_minus = ()=>{
console.log('minus')
return {
type: "MINUS",
payload: -1
};
}
/*--Components & containers--*/
//counter
let Counter = (props)=>{
return (<div className="counter">{props.num}</div>);
}
const mapStateToProps=(state)=>{
return {num: state.num};
}
Counter = ReactRedux.connect(mapStateToProps)(Counter);
//plus
let Plus = (props)=>{
 return (<div className="plus" onClick={props.plus}>+</div>);
}
const mapDispatchToProps_plus = (dispatch)=>{
return Redux.bindActionCreators({plus: action_plus},dispatch);
}
Plus = ReactRedux.connect(null,mapDispatchToProps_plus)(Plus);
//minus
let Minus = (props)=>{
console.log(props);
return (<div onClick={props.minus} className="minus">-</div>);
}
const mapDispatchToProps_minus = (dispatch)=>{
return Redux.bindActionCreators({minus: action_minus},dispatch);
}
Minus=ReactRedux.connect(null,mapDispatchToProps_minus)(Minus);
// Provider & store
const Provider = ReactRedux.Provider,
store = Redux.createStore(rootReducer);
//App
const App = ()=>{
return (
<Provider store={store}>
<div className="container">
<Plus/>
<Counter/>
<Minus/>
</div>
</Provider>
);
}
ReactDOM.render(<App/>,document.body);
CODEPEN

You code of Counter component should look like this:
let Counter = (props)=>{
return (<div className="counter">{props.num}</div>);
}
Counter = ReactRedux.connect(mapStateToProps)(Counter);
You have to render component returned by the connect function. Similar mistake is in Plus and Minus.
You have provided mapDispatchToProps_minus as the first argument for Plus and Minus component which is wrong. First argument should be mapStateToProps
const mapStateToProps = () => ({})
ReactRedux.connect(mapStateToProps, mapDispatchToProps_minus)(Minus);

I m not sure but i just used your Codepen and it seems that you forgot to pass props to your counter component.
if you do
Counter num={4}
then it should work :)

You create connected components but you never assign them to variables, and you put the old 'dumb' components in the main component that you render to the DOM.
I've created a fixed version of your CodePen.
/*--Reducers--*/
const reducer_num = (state = 0, action) => {
switch (action.type) {
case "PLUS":
case "MINUS":
return state + action.payload;
default:
return state;
}
};
const rootReducer = Redux.combineReducers({
num: reducer_num
});
/*--Action creators--*/
const action_plus = () => {
return {
type: "PLUS",
payload: 1
};
};
const action_minus = () => {
return {
type: "MINUS",
payload: -1
};
};
/*--Components & containers--*/
//counter
const Counter = props => {
return <div className="counter">{props.num}</div>;
};
const mapStateToProps = state => {
return { num: state.num };
};
const CounterContainer = ReactRedux.connect(mapStateToProps)(Counter);
//plus
const Plus = props => {
return <div className="plus" onClick={props.plus}>+</div>;
};
const mapDispatchToProps_plus = dispatch => {
return Redux.bindActionCreators({ plus: action_plus }, dispatch);
};
const PlusContainer = ReactRedux.connect(mapDispatchToProps_plus)(Plus);
//minus
const Minus = props => {
return <div onClick={props.minus} className="minus">-</div>;
};
const mapDispatchToProps_minus = dispatch => {
return Redux.bindActionCreators({ minus: action_minus }, dispatch);
};
const MinusContainer = ReactRedux.connect(mapDispatchToProps_minus)(Minus);
// Provider & store
const Provider = ReactRedux.Provider,
store = Redux.createStore(rootReducer);
//App
const App = () => {
return (
<Provider store={store}>
<div className="container">
<PlusContainer />
<CounterContainer />
<MinusContainer />
</div>
</Provider>
);
};
ReactDOM.render(<App />, document.body);

Not able to understand the use of selector and binding

I am practicing reactjs and redux course. I am understanding the react part and also redux but could not grasp the knowledge of selector and binding done in below code.
Here is the code
const reducer = (state = 1, action) => {
switch (action.type) {
case 'INCREASE':
return state + 1;
default:
return state;
}
}
const selectCounter = state => state;
const AppPresentation = ({ text, onClick }) => (
<button onClick={onClick}>{text}</button>
);
const App = connect(
(state, { bindings: { selectText } }) => ({ text: selectText(state) }),
dispatch => ({ onClick() { dispatch({ type: 'BUTTON_CLICKED' }); }})
)(AppPresentation)
const onClickIncrease = function*(){
while (yield take('BUTTON_CLICKED'))
yield put({ type: 'INCREASE' });
}
const saga = createSagaMiddleware();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(saga)));
saga.run(onClickIncrease);
ReactDOM.render(
<Provider store={store}>
<App bindings={{ selectText: selectCounter }} />
</Provider>,
document.querySelector('#app'));
what is the advantage of above code over below code where selector and bindings has not done?
const reducer = (state = 1, action) => {
switch (action.type) {
case 'INCREASE':
return state + 1;
default:
return state;
}
}
const selectCounter = state => state;
const AppPresentation = ({ text, onClick }) => (
<button onClick={onClick}>{text}</button>
);
const App = connect(
state => ({ text: selectCounter(state) }),
dispatch => ({ onClick() { dispatch({ type: 'BUTTON_CLICKED' }); }})
)(AppPresentation)
const onClickIncrease = function*(){
while (yield take('BUTTON_CLICKED'))
yield put({ type: 'INCREASE' });
}
const saga = createSagaMiddleware();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(saga)));
saga.run(onClickIncrease);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.querySelector('#app'));
Can anyone please make me understand with simple English explanation? :) Sorry my English is poor.

mapStateToProps has the follwoing syntax mapStateToProps(state, [ownProps])
If ownProps is specified as a second argument, its value will be the props passed to your component, and mapStateToProps will be additionally re-invoked whenever the component receives new props (e.g. if props received from a parent component have shallowly changed, and you use the ownProps argument, mapStateToProps is re-evaluated)
In your case { bindings: { selectText } } will receive the props passed from the parent component
In the first code you are sending a prop to the App like <App bindings={{ selectText: selectCounter }} /> which is received in you mapStateToProps component while in the second code you are not passing any such prop to the component. Hence the first has an advantage over the second to allow you to pass props to the child and update the value in the child when the prop changes.