Redux is a predictable state container for JavaScript Applications.Redux is not tied to React (can be used with React, Angular, Vue or even vanilla JS
리덕스 자체의 작동 방식을 이해하기 위해 먼저 리액트 없이 구현한다. (1) 프로젝트 폴더 redux-demo 생성 (2) 터미널에 npm init --yes입력하여 package.json 디폴트 세팅으로 초기 설정(3) npm intstall redux로 리덕스 설치
상점에 비유하여 리덕스의 주요 컨셉을 알아본다. Entities Shop - Store cakes on a shelfShopkeeper - At the front of the storeCustomer - At the store entranceActivitiesCusto
The state of your whole application is stored in an object tree within a single store.Maintain our application state in a single object which would be
Actions The only way your application can interact with the store. Carry some information from your app to the redux store. Plain JavaScript objects.
specify how the app's state changes in response to actions sent to the store.Reducer is a function that accepts state and actions as arguments, and re
One store for the entire application. Responsibilitesholds application stateallows access to state via getState()allows state to be updated via dispat
Cake shopCakes stored on the shelfShopkeeper to handle BUY_CAKE from customerSell ice creamsIce creams stored in the freezerNew shopkeeper to handle B
이전 포스트에서 가정한 내용처럼, 여러 명의 shopkeeper가 각자 맡은 품목만 담당하는 것을 코드로 나타내면 여러 개의 reducer 함수로 표현될 것이다. 우선 하나의 reducer함수로 여러 개의 액션을 처리하는 예제를 먼저 살펴본다. Node index잘 작
How to combine the cake reducer and the ice cream reducer? Redux provides a method called combineReducers to combine multiple reducers into a single
is the suggested way to extend Redux with custom functionality.provides a third-party extention point between dispatching an action, and the moment it
Synchronous Actionsas soon as an action was dispatched, the state was immediatly updated.if you dispatch the BUY_CAKE action, the numOfCakes was right
How to use action creators with network request, that is how to make an API call when working with redux ? We need to install two packages: will be us
Cake Shop App Our application is a simple react application. The state of the application is maintained seperately in the redux store. Our applicatio
define our actions and actions creators
define the initial state a reducer function
Create a redux store and provide it to our react application.To provide this store to our react application, react-redux library exports a component c
How de we get hold of the redux state, and how do we dispatch an action from within a react component ? In the cakeContainer we want to display the nu
React Redux patterndefine action creators, reducers, provide the store and connect the components -> Components can access state and dispatch actions.
useSelector is the hook which acts as a closed equivalent to the mapStateToProps function. So it is used to get hold of any state that is maintained i