Scribd
Upload
23 views10 pages

2450

Uploaded by

craviteja9
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
23 views10 pages

2450

Uploaded by

craviteja9
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 10
What is REDUX? © oS. Gy hays Swipe — 2/10 s Redux is a JavaScript library for managing the state of applications. It provides a way to centralize the state of an application in a single store, making it easier to debug, test, and reason about the state changes in the application. One particularly cool feature of Redux is its support for time travel. With Redux DevTools, developers can inspect the state of their application at any point in time, including past and future states. This makes it easier to debug and understand the state changes in the application. Swipe —> 3/10 action is dispatched and ak Forwarded to leat Sloe ACTIONS STORE ap) ilodsi 4 returns an action | Nas ACTION CREATOR COMPONENT ke (ul) Invokes an ee action the Gi creator cy Swipe —> 4/10 Store Creation In React, "store" refers to a centralized container that holds the state of your application. It's where you keep all of the data that your React components need to render, and it's managed using a state management library like Redux or MobX. To create a Redux store, use the createStore function from the redux library, and pass in your root reducer as an argument. Le Oe import { createStore } from ‘redux’; import rootReducer from ‘./reducers'; const store = createStore(rootReducer ); 7 old Evale) Action Creation Actions in Redux are plain objects that describe changes to the state. To create an action, define an object with a type property and any other data needed to describe the change. ee@e const addTodo = (text) => { return { type: ‘ADD_TODO', Ato aa 35 ie & Swipe —> 6/10 Dispatching Actions To dispatch an action and update the state, call the dispatch method on your store and pass in the action as an argument. store.dispatch(addTodo( ‘Learn Redux' )); cy Swipe —> 7/10 Reducer Functions Reducers in Redux are pure functions that take in the current state and an action and return the next state. const todoReducer = (state = [], action) => { switch (action.type) { case ‘ADD_TODO': return [ eee hay £ text: action.text, completed: false vi 5 default: ig-ae0 amen 1 ee} a] cy Swipe —> 8/10 Combining Reducers If your application has multiple reducers, you can use the combineReducers function from the redux library to combine them into a single root reducer. import { combineReducers } from ‘redux’; const rootReducer = combineReducers({ todos: todoReducer, re cy Swipe —> 9/10 Connecting to React Components To connect your Redux store to React components, use the connect function from the react-redux library. eee import { connect } from ‘react-redux'; const TodoList = ({ todos }) => (
    {todos.map((todo, index) => (
  • {todo.text}
    • es Jae VB const mapStateToProps = (state) => { return { todos: state.todos oa is export default connect(mapStateToProps )(TodoList); Swipe —> Slobodan Gaji¢ (Solalt= ai Or-lenrolg Gel sero =ye] FOLLOW FOR MORE

You might also like