Redux on functional components in Reactjs (web)

Question

I am writing this question cause I would like to ask you for some help in how to use the redux on my functional components. I had a look at other examples with React components but I cannot understand how to get the "store" value in functional components.

My idea is to use my

store.getState()

To check states and interact with the UI, inside my functional component but I cannot make it happen.

Any help please ?

For example, a functional component :

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Header.css';
import { Navbar, Nav } from 'react-bootstrap';
import HeaderMenu from '../HeaderMenu';
import cx from 'classnames';

function Header() {
  return (
    <Navbar fluid fixedTop id="Header" className={s.navContainer}>
      <Nav block className={cx(s.HeaderTitle, s.hideOnSmall)}>Project title</Nav>
      <HeaderMenu />
    </Navbar>
  );
}

export default withStyles(s)(Header);

How can I use the "store" object inside my Header component ? It works on my App component, just I don't know how to use it within my components.

My questions are:

Should I use actions for retrieving the state instead ??
Should I pass the store object component to the component properties?

Thanks in advance!

EDIT :

I am using https://github.com/kriasoft/react-starter-kit with the redux branch https://github.com/kriasoft/react-starter-kit/tree/feature/redux

I guess you are using react-redux bindings to connect redux to your react application? — Scarysize
– Scarysize, Commented Jul 11, 2016 at 14:03

Miguel Coder · Accepted Answer · 2019-08-23 04:36:18Z

7

As of version 7.x react-redux now has hooks for functional components.

Header.jsx

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Header.css';
import { Navbar, Nav } from 'react-bootstrap';
import HeaderMenu from '../HeaderMenu';
import cx from 'classnames';
import { useSelector } from 'react-redux'

function Header() {
  const store = useSelector(store => store)
  return (
    <Navbar fluid fixedTop id="Header" className={s.navContainer}>
      <Nav block className={cx(s.HeaderTitle, s.hideOnSmall)}>Project title</Nav>
      <HeaderMenu />
    </Navbar>
  );
}

export default withStyles(s)(Header);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux'
import store from './store'

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

answered Aug 23, 2019 at 4:36

Miguel Coder

1,95721 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Hamann Over a year ago

There are some specific drawbacks / caveats to using hooks with redux. Be sure to read this first: react-redux.js.org/next/api/hooks#usage-warnings

luboskrnac · Accepted Answer · 2016-07-11 14:20:13Z

7

As Dan Abramov mentioned in his insanely famous Egghead.io series, presentational component shouldn't be aware of Redux store and shouldn't use it directly. You should create something called container component, which will pass necessary state fields + action callbacks to your presentational component via properties.

I highly recommend to watch Dan Abramov's Egghead.io series if above concepts are not familiar to you. Patterns he is describing there are de facto standard style guide for writing React+Redux applications nowadays.

answered Jul 11, 2016 at 14:20

luboskrnac

24.7k10 gold badges86 silver badges93 bronze badges

Comments

user7024499 · Accepted Answer · 2016-10-25 03:17:19Z

If you want to get the Redux state on a functional component, you either have to manually connect the component and Redux, which is very tedious. You would have to access the reducer variable inside your React Component, meaning import the reducer into the component file among other configurations.

This would interfere with other benefits you would normally get, such as action creators, dispatching actions automatically through middleware, and more.

A cleaner idea is to just use the Provider Component that comes with React-Redux to turn your Header component into a Container. A Container is a react component that 'listens for' any changes that have been made to the store. You are essentially wrapping your Header component in a higher order component that is connected directly to the redux store.

This way is more scalable and you can easily create a boilerplate file that can be used with any React/Redux project.

Scarysize · Accepted Answer · 2016-07-11 14:23:22Z

0

Try to understand the individual modules/components a boilerplate project contains before going with it. If you are new to react (and its complementary libraries) I recommend you start here:

https://github.com/petehunt/react-howto

For redux:

http://redux.js.org/

These are both great ressources which clarify the majority of react related questions on stackoverflow.

answered Jul 11, 2016 at 14:23

Scarysize

4,31130 silver badges37 bronze badges

Comments

Andrea Korinski · Accepted Answer · 2016-07-11 14:28:26Z

0

You can use react-redux library, and using connect you will access your store data as a component props - it's easy and efficient.

answered Jul 11, 2016 at 14:28

Andrea Korinski

2751 silver badge8 bronze badges

Collectives™ on Stack Overflow

Redux on functional components in Reactjs (web)

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related