R2 Day 95 of #100DaysOfCode Started learning about Redux today. So far so good 👍 It is important to take things slow at first 🐢 so I created some lovely incrementing buttons with my counterReducer function 3⃣2⃣1⃣

3⃣ Setting Up Reducers - Reducers specify how the app's state changes in response to actions. - Create a reducers directory. - Example reducer (reducers/counterReducer.js):

Step 2: Use useReducer in a Component Now, you integrate useReducer in your functional component. In this component: - useReducer is initialized with counterReducer and the initialState. - state now contains the current count. - dispatch is a function that you can call to send

🚀 Created a Redux counterReducer in TypeScript! ✨ Handles INCREMENT and DECREMENT actions, keeping track of count. 🔄 Ready for state management magic! #TypeScript #Redux #Coding #Javascript #React

Combines a 'counterReducer' into a Redux rootReducer, facilitating centralized state management with a 'counter' property in a TypeScript application. #react #redux #typescript #javascript #webdevelopment

🔄 Behold the power of reducers! With this counter reducer, we can effortlessly update the state based on the dispatched actions. Let's keep the counter going! 🔢 #Redux #CounterReducer #StateUpdate

const rootReducer = Redux.combineReducers({ count: counterReducer, auth: authReducer })

What will be the result of executing this Redux code? const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } }

In this example, we create a Redux store with a 'counterReducer'. The reducer responds to 'INCREMENT' and 'DECREMENT' actions to increase or decrease the state, which in this case is a simple counter.

In the previous example, by using the configureStore function i have created a store. In this setup, counterReducer is assigned to the counter key in the store's reducer object, effectively integrating the counter slice's reducer logic into the Redux store.

In the above example, Initial State: The initialState is an object that represents the initial state of this part of the Redux store. In this case, it's { count: 0 }. The counterReducer function determines how the state should change in response to different actions. It takes

createStore(counterReducer) // You can use subscribe() to update the UI in response to state changes. // Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly. // There may be additional use cases where it's helpful to 👇

@AnshumanKhanna5 Predictability: "The state should change in a consistent, expected way." jsCopyEdit// Redux example - pure reducer const counterReducer = (state = 0, action) => { switch (action.type) { case "INCREMENT": return state + 1; default: return state; } };

@sethedavenport Got a question about your counterReducer in the ng2-redux example: https://t.co/76Af7nrRUj line 8, I thought that..

@trueadm Sorry line 21. counterReducer is from previous example.

(ข้อมูล ใน store = createStore(counterReducer)) ซึ่งหากมีการ dispatch ก็จะใช้ store.getState() เพื่อนำข้อมูลใน state มาแสดงผล ลองนึกภาพตามว่าหาก component ขวาสุดต้องการเปลี่ยนแปลงข้อมูล ก็แค่ dispatch แล้ว component ซ้ายสุดต้องการนำข้อมูลมาแสดงก็แค่ subscribe ไว้เท่านั้นเอง

@phenomnominal @typescript Huh, I’m actually surprised to learn that `handleAction` is resolvable from the type parameter constraint of `counterReducer`. It makes me a little squirmy that it’s essentially a useless generic, but you can’t remove it because `handleAction` isn’t visible from the param type.

The whole global state of your app is stored in an object tree inside a single store. to create your redux store import createStore from 'redux' Create a Redux store holding the state of your app. Its API is { subscribe, dispatch, getState }. createStore(counterReducer)