A
A
Anastasia Panfilova2017-10-22 14:26:56
JavaScript
Anastasia Panfilova, 2017-10-22 14:26:56

How does react + redux work?

Good day. I must warn you that I am new to react and I apologize in advance for the stupid question.
Googling what react is and what it is eaten with, I decided to write a react application using redux and router (react-router-redux ^ 5.0.0-alpha.6)
And then I realized that, apparently, I don’t fully understand how redux works. Roughly speaking, in my application I have a header (a slide-out navigation menu) and content (page content is displayed there depending on the path).
Header is a smart container where the connect function only takes the necessary parts of the store for the navigation menu and navigationActions.
SwitchContainer - there are routes that render the necessary "smart" components depending on the page address. Each such "smart" component also has a connect, which takes only the necessary parts of the store (there was no smell of navigation there)

class App extends Component {

    constructor(props){
        super(props);
    }

    render() {
        return (
            <div className="component-app">
                <Header />
                <div className="all-wrapper">
                    <div className="main-content">
                        <SwitchContainer />
                    </div>
                </div>
            </div>
        )
    }
}

Why is it that when I use the navigationActions functions, which change only those parts of the state related to the navigation menu, other components that do not receive the parts of the store related to navigation also react to this?
I hope I made my point clear.
Most likely I'm doing something wrong? Maybe the store should not store the state of individual pages, but only the general state of the application? Am I using something wrong? help me please

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander Gontarev, 2017-10-22
@nemarta

I didn't work specifically with the package react-router-redux, but it looks like this:
Redax reducers are pure functions that return a new object, which means that when you call an action navigationActionsthat in turn calls the reducer, you end up with a new state, and t .to. your other components use state, then this state is also new for them, and a rerender occurs so that there are no unnecessary rerenders, the shouldComponentUpdate or PureComponent method will help you

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question