Socket
Socket
Sign inDemoInstall

react-redux

Package Overview
Dependencies
519
Maintainers
5
Versions
138
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-redux

Official React bindings for Redux


Version published
Maintainers
5
Weekly downloads
6,976,796
decreased by-8.92%

Weekly downloads

Package description

What is react-redux?

The react-redux package is the official React bindings for Redux. It allows React components to read data from a Redux store, and dispatch actions to the store to update data.

What are react-redux's main functionalities?

Provider Component

The Provider component makes the Redux store available to any nested components that need to access the Redux store.

{"import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';
import App from './App';

const store = createStore(rootReducer);

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

connect Function

The connect function connects a React component to the Redux store. It can map state and dispatch to the props of the component.

{"import { connect } from 'react-redux';
import { increment, decrement } from './actionCreators';

function Counter({ count, increment, decrement }) {
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

const mapStateToProps = state => ({
  count: state.count
});

const mapDispatchToProps = {
  increment,
  decrement
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);"}

useSelector Hook

The useSelector hook allows you to extract data from the Redux store state, using a selector function.

{"import { useSelector } from 'react-redux';

function MyComponent() {
  const data = useSelector(state => state.data);
  return <div>{data}</div>;
}"}

useDispatch Hook

The useDispatch hook returns a reference to the dispatch function from the Redux store. You can use it to dispatch actions.

{"import { useDispatch } from 'react-redux';
import { myAction } from './actionCreators';

function MyComponent() {
  const dispatch = useDispatch();
  return (
    <button onClick={() => dispatch(myAction())}>Dispatch Action</button>
  );
}"}

Other packages similar to react-redux

Readme

Source

React Redux

Official React bindings for Redux. Performant and flexible.

GitHub Workflow Status npm version npm downloads #redux channel on Discord

Installation

Create a React Redux App

The recommended way to start new apps with React and Redux is by using our official Redux+TS template for Vite, or by creating a new Next.js project using Next's with-redux template.

Both of these already have Redux Toolkit and React-Redux configured appropriately for that build tool, and come with a small example app that demonstrates how to use several of Redux Toolkit's features.

# Vite with our Redux+TS template
# (using the `degit` tool to clone and extract the template)
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

# Next.js using the `with-redux` template
npx create-next-app --example with-redux my-app

An Existing React App

React Redux 8.0 requires React 16.8.3 or later (or React Native 0.59 or later).

To use React Redux with your React app, install it as a dependency:

# If you use npm:
npm install react-redux

# Or if you use Yarn:
yarn add react-redux

You'll also need to install Redux and set up a Redux store in your app.

This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

If you don’t yet use npm or a modern module bundler, and would rather prefer a single-file UMD build that makes ReactRedux available as a global object, you can grab a pre-built version from cdnjs. We don’t recommend this approach for any serious application, as most of the libraries complementary to Redux are only available on npm.

Documentation

The React Redux docs are published at https://react-redux.js.org .

How Does It Work?

The post The History and Implementation of React-Redux explains what it does, how it works, and how the API and implementation have evolved over time.

There's also a Deep Dive into React-Redux talk that covers some of the same material at a higher level.

License

MIT

Keywords

FAQs

Last updated on 12 Jan 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc