We Keep Coding

Side effect function is not getting called in Cmd.run using redux-loop

I am working on a react redux application where in, on a button click I need to change my window location.
As of now, I am dispatching the button click action and trying to achieve the navigation in reducer using redux-loop.
Component js
class Component {
constructor() {
super()
}
render() {
return (
<button onClick={() => this.props.onButtonClick()}>Navigate</button>
)
}
}
const mapDispatchToProps = (dispatch) => {
return {
"onButtonClick": () => dispatch(handleClick())
};
}
Action js
export const handleClick = () => ({
type: NAVIGATE
});
Reducer js
export default (state = {}, action) => {
if (action.type === NAVIGATE) {
return loop(state, Cmd.run(navigateTo));
}
};
Effect js
export const navigateTo = () => {
window.location = "https://www.stackoverflow.com";
}
Apart from this action, I have lot many actions that involve side effect as well as state manipulation, hence redux-loop.
I have two questions:
Control is not going into navigateTo() on button click. What am I doing wrong?
I feel reducer is not a right place for it as we are not manipulating state here.
What would be the best place to put this piece of code when button click action is dispatched?

the code you have looks correct. Did you use the store enhancer when creating your redux store? Did you try setting a breakpoint in your reducer and verifying it gets called as you expect? https://redux-loop.js.org/docs/tutorial/Tutorial.html

React: change button text while doing work

In my React application, I would like a button that normally says Save, changes its text to Saving... when clicked and changes it back to Save once saving is complete.
This is my first attempt:
import React from 'react';
import { Button } from 'react-bootstrap';
class SaveButton extends React.Component {
constructor(props) {
super(props);
this.state = { isSaving : false };
this.onClick = this.onClick.bind(this);
}
onClick() {
// DOES NOT WORK
this.setState({ isSaving : true });
this.props.onClick();
this.setState({ isSaving : false });
}
render() {
const { isWorking } = this.state;
return (
<Button bsStyle="primary"
onClick={isWorking ? null : this.onClick}>
{isWorking ? 'Saving...' : 'Save'}
</Button>
);
}
}
export default SaveButton;
This doesn't work because both setState and this.props.onClick() (passed in by the parent component) are executed asynchronously, so the calls return immediately and the change to state is probably lost in React optimization (and would probably be visible only for a few milliseconds anuway...).
I read up on component state and decided to lift up state to where it belongs, the parent component, the form whose changes the button saves (which in my app rather is a distant ancestor than a parent). So I removed isSaving from SaveButton, replaced
const { isWorking } = this.state;
by
const { isWorking } = this.props.isWorking;
and tried to set the state in the form parent component. However, this might be architecturally cleaner, but essentially only moved my problem elsewhere:
The actual saving functionality is done at a totally different location in the application. In order to trigger it, I pass onClick event handlers down the component tree as props; the call chain back up that tree upon a click on the button works. But how do I notify about completion of the action in the opposite direction, i.e. down the tree ?
My question: How do I notify the form component that maintains state that saving is complete ?
The form's parent component (which knows about save being complete) could use a ref, but there isn't only one of those forms, but a whole array.
Do I have to set up a list of refs, one for each form ?
Or would this be a case where forwarding refs is appropriate ?
Thank you very much for your consideration! :-)

This doesn't work because both setState and this.props.onClick()
(passed in by the parent component) are executed asynchronously, so
the calls return immediately and the change to state is probably lost
in React optimization
setState can take a callback to let you know once state has been updated, so you can have:
onClick() {
this.setState({ isSaving : true }, () => {
this.props.onClick();
this.setState({ isSaving : false });
});
}
If this.props.onClick() is also async, turn it into a promise:
onClick() {
this.setState({ isSaving : true }, () => {
this.props.onClick().then(() => {
this.setState({ isSaving : false });
});
});
}

can you see ?
https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Global_Objects/Promise
parent component's onClick function
onClick(){
return new Promise(function(resolve,reject){
//example code
for(let i=0;i<100000;i++){
//or api call
}
resolve();
})
}
SaveButton component's onClick funtion
onClick(){
this.setState({ isSaving : true });
this.props.onClick().then(function(){
this.setState({ isSaving : false });
});
}

Here is your code that works :
import React from 'react';
import { Button } from 'react-bootstrap';
class SaveButton extends React.Component {
constructor() {
super();
this.state = {
isSaving: false
};
this.handleOnClick = this.handleOnClick.bind(this);
}
handleOnClick() {
this.setState(prevState => {
return {
isSaving: !prevState.isSaving
}
});
console.log("Clicked!",this.state.isSaving);
this.handleSave();
}
handleSave() {
// Do what ever and if true => set isSaving = false
setTimeout(()=>{
this.setState(prevState=>{
return {
isSaving: !prevState.isSaving
}
})
},5000)
}
render() {
const isWorking = this.state.isSaving;
return (
<Button
bsStyle="primary"
onClick={this.handleOnClick}
>
{isWorking ? 'Saving...' : 'Save'}
</Button>
);
}
}
export default SaveButton;
You need to change const isWorking instead of const {isWorking} and you need to handle save function in some manner.
In this example I used timeout of 5 second to simulate saving.

React - Call method after redirect

I have two different links. One is main Page, other is gallery. I have on main page 3 links with method scrollIntoView onClick that are taking me to different sections. I want to implement method redirecting me from gallery component to main page and when it's done call method scrollIntoView.
goToContact method:
goToContact = e => {
if (window.location.pathname === "/fotobudka/") {
this.fbContactElement.scrollIntoView({
behavior: "smooth",
block: "start"
});
}
if (window.location.pathname !== "/fotobudka") {
this.changeUrl();
this.goto();
}
};
Change Url redirect me to main page:
changeUrl() {
return <Redirect to="/fotobudka/" />;
}
When it's done:
goto = () => {
setTimeout(() => {
let fbContactElement = document.getElementById("contact-form");
fbContactElement.scrollIntoView({
behavior: "smooth",
block: "start"
});
}, 100);
};
My method works perfectly, but I know SetTimeout isn't good solution. I've tried async/await but I think I am not good enough to implement that.
How to refactor this without using SetTimeout function ?

You have to use setState to set a property that will render the inside your render() method.
class MyComponent extends React.Component {
state = {
redirect: false
}
goTo = () => {...}
goToContact = e => {
this.setState({ redirect: true },
()=>goto());
}
render () {
const { redirect } = this.state;
if (redirect) {
return <Redirect to='/fotobudka'/>;
}
return (...)
}
}
You can also see an example in the official documentation: https://reacttraining.com/react-router/web/example/auth-workflow

I solved my issue, in one forum I've checked that via interval we can check if item already exist on page. In React it looks like this:
goto = selector => {
if (window.location.pathname !== "/fotobudka/") {
this.constructor.changeUrl();
}
let checkExist = setInterval(() => {
let element = document.getElementById(selector);
if (element) {
element.scrollIntoView({
behavior: "smooth",
block: "start"
});
clearInterval(checkExist);
}
}, 100);
};
static changeUrl() {
return <Redirect to="/fotobudka/" />;
}

You can use the componentDidMount() lifecycle hook for executing some code when a component is loaded. But you have to avoid an infinite update cycle by passing some query param something like doScroll=true. Now you can simply check inside your componentDidMount() hook for your query param and execute your scroll function

How to wait for a Redux action to change state from a React component

I'm in a component which has a prop currentLineIndex passed by its parent container and coming from a Redux reducer.
In the same component's function I update currentLineIndex with an action creator and then I want to scroll to the new currentLineIndex. But it's not already updated, so I scroll to the same line.
I've tried using async / await as you'll see but it's not working.
In my component:
const { currentLineIndex, setCurrentLineIndex } = props; // passed by the parent container
const handlePlaybackEnd = async () => {
const nextIndex = currentLineIndex + 1;
// await don't wait until global state / component props gets updated
await setCurrentLineIndex(nextLineIndex);
// so when I scroll on next line, I scroll to the same line.
scrollToCurrentLine();
};
const scrollToCurrentLine = () => {
const currentLineEl = document.getElementById(currentLineIndex);
currentLineEl.scrollIntoView({ block: 'start', behaviour: 'smooth' });
};
in actions/index.js:
export function setCurrentLineIndex(index) {
return { type: SET_CURRENT_LINE_INDEX, payload: index };
}
in my reducer:
case SET_CURRENT_LINE_INDEX:
return {
...state,
currentLineIndex: action.payload,
};
Action and reducers are working good and my component state is successfully updated, but it's already too late.
I really need to rely on Redux state, not just to pass the currentLineIndex to scrollToCurrentLine(), that would be too easy :)
What would be the best solution to wait until my component state has been updated ?

One solution can be to define setCurrentLineIndex such that it receives a callback.
//assuming the parent container is a class
setCurrentLineIndex = (index, cb)=>{
//write the logic here then execute the callback
cb()
}
// Then in your child component, you could do something like this
setCurrentLineIndex(nextIndex, scrollToCurrentLine)

I finally solved this by making my component a class component so I could use componentDidUpdate
componentDidUpdate(prevProps) {
if (prevProps.currentLineIndex !== this.props.currentLineIndex) {
this.scrollToCurrentLine(this.props.currentLineIndex);
}
}
handlePlaybackEnd = () => this.props.setCurrentLineIndex(this.props.currentLineIndex + 1);
2020 UPDATE
Hooks made it a lot simpler, no need for a class component, just use an effect:
const scrollToCurrentLine = useCallback(() => {
const currentLineEl = document.getElementById(currentLineIndex);
currentLineEl.scrollIntoView({ block: 'start', behaviour: 'smooth' });
}, [currentLineIndex]);
useEffect(scrollToCurrentLine, [scrollToCurrentLine]);

I solved a similar problem by creating a little npm module. It allows you to subscribe to and listen for redux actions and executes the provided callback function as soon as the state change is complete. Usage is as follows. In your componentWillMount or componentDidMount hook:
subscribeToWatcher(this,[
{
action:"SOME_ACTION",
callback:()=>{
console.log("Callback Working");
},
onStateChange:true
},
]);
Detailed documentation can be found at this link

React - method run right times via state but run double times when Parent Component changing state

I am trying to build a page with some data initialized at first time mounted, and update when websocket server give a response msg when certain button click event is triggered, also I need to ban the button aka. disabled, and tell the user in how many seconds the button is clickable again.
My first thought is, single component, update via states, give a state to the counter, then use setTimeout to count down 1 every 1000ms, turned out that the counter "banCount" worked well, until I add the websocket.send(), then it counted down 2 every time.
I thought that would be because when the websocket server responsed, the state is change, so the whole component is updated, the counter is messed up.
So, I had an idea, separating it into a child component, with its own state, but do nothing when in the life cycle of componentWillReceiveProps, and it will not receive props, so it will just work with it is own state. But the result is with or without separating the counter into a child component, they worked the same.
parent component:
import React from 'react';
import ReactDOM from 'react-dom';
import TestChild from './testChild/testChild';
class TestParent extends React.Component {
constructor(props) {
super(props);
this.state = {
wsData: null,
};
}
componentWillMount() {
this.wsClient = new WebSocket("ws://localhost:9000/server", 'echo-protocol');
this.wsClient.onmessage = msg => {
if (msg) {
this.setState({
wsData: msg.data
});
}
};
}
render() {
const data = () => {
if (this.state.wsData) {
return this.state.wsData;
} else {
return "waiting data";
}
};
return (
<div>
<div>{data()}</div>
<TestChild wsClient={this.wsClient}/>
</div>
);
}
}
ReactDOM.render(
<TestParent />,
document.getElementById('reactWrapper')
);
and the Child Component:
import React from 'react';
class TestChild extends React.Component {
constructor(props) {
super(props);
this.count = null;
this.state = {
banCount: this.count
};
this.wsClient = this.props.wsClient;
this.countupdate = 0;
}
banCount() {
this.setState({
banCount: this.count
});
}
callNext(n) {
this.wsClient.send('can you hear me');
this.count = n;
this.banCount();
}
componentDidUpdate() {
if (this.count > 0) {
setTimeout(() => {
this.count -= 1;
this.banCount();
}, 1000);
} else if (this.count === 0) {
this.count = null;
this.banCount();
}
}
render() {
return <button onClick={() => this.callNext(3)}>click me {this.state.banCount}</button>;
}
}
export default TestChild;
Please ignore 'whether the server and websocket connection' works part, they are fine.
I don't know why, I even had not updated Child component, I am really new to React, I really do not know how to debug this, I read this code for hours, but it is just too complicated for me.
Why it counted down 2 every time? and for sure I am wrong, what is the right way.
Please help me with only React and vanilla Javascript, I had not use Redux or Flux and even did not know what they are, thank you.

This is NOT tested code, but should help you to build what you want, I didn't tested your component but I suspect that your setTimeout() is called several times.
import React from 'react';
class TestChild extends React.Component {
constructor(props) {
super(props);
this.state = {
count: null,
};
}
startCountDown() {
var newCount = this.state.count -1;
if(newCount === 0){
clearTimeout(this.timer);
}
this.setState({
count: newCount,
});
}
callNext(n) {
this.wsClient.send('can you hear me');
this.setState({
count: n,
});
this.timer = setTimeout(() => {
startCountDown();
}, 1000);
}
componentWillUnmount() {
clearTimeout(this.timer);
}
render() {
return <button disabled={this.state.count>0} onClick={() =>
this.callNext(3)}>click me {this.state.count}</button>;
}
}
export default TestChild;

Finally I worked it out.
It is because React will re-render all the child component with or without setting children's new states. The only way to stop it from re-render is to use ShouldComponentUpdate, so:
shouldComponentUpdate() {
return this.state.banCount !== null;
}
will work, as when the child component receiving props after websocket.send(), this.count is still null, but right after the websocket.send(), this.count is set to 3, so the child component will update since.
Also another workround:
callNext(n) {
this.wsClient.send('can you hear me');
this.count = n;
}
componentWillReceiveProps(nextProps) {
this.data = nextProps.datas;
this.setState({
banCount: this.count
});
}
in this workround, without shouldComponentUpdate() the child component will always re-render when its parent receive websocket data, so in the click handler function, stop calling bancount(), so it would not update itself, but set the state when receive nextProps, that will trigger the re-render.
To sum all above:
child component will always re-render with or without setting state via new props unless shouldComponentUpdate return false, I alreay called bancount() in the click handler function, trigger child component to update the state itself, but after the parent component receiving websocket data, it triggered state updating again, that is why it run double times.