RiverPod#2 StateNotifierProvider

Mark Choi
3 min readJun 29, 2023

StateNotifier는 말그대로 State의 변경을 notify(알림) 알려준다.
가장 사용할 빈도가 높은 Provider가 되겠다.

일단 해당 state가 적용될 모델을 만들어보자.

User 데이터를 컨트할다.

일단 클래스를 만들어준다.
StateNotifier를 상속받고, StateNotifier의 제너릭은 컨트롤하고싶은 타입을 넣어주면된다. 여기서는 아까 만든 UserProfileItem의 List타입을 제어하려고한다.

super 생성자에는 초기값을 넣어주면되고 어떤 값이던 상관없다. 초기값이 필요없다면 그냥 비워두면 된다.

UserProfileItem 3개 값을 가지도록 초기화했다. initializer와 같은 느낌.

그 다음은 클래스 안에 함수를 만들어보자. 그러면 그 StateNotifer를 함수적으로 제어할 수 있게 된다. 아래에서는 changeUserName으로 이름을 바꾸고, changePremiumState로 premium여부를 컨트롤 해본다.
일단 state.map으로 id가 같은 값들을 리스트해주고, 같으면 변경이 필요한 대상이므로 새로운 이름으로 바꿔주고, 다르면 변경이 필요없으니 전부 그대로 값을 bypass해주는 과정이 되겠다.

마지막으로 이 StateNotifier를 사용하기 위해 Provider를 final로 만들어준다.
첫번째 제너릭: 어떤 타입의 Notifier인지? 여기서는 UserProfileNotifier class명.
두번째 제너릭: 어떤 타입을 Notifier가 관리할 것인지? 여기서는 List<UserProfileItem>
return: 두번째 제너릭과 같다.

사용하는 단에서는 아래와 같이 사용하면된다.

일단, Simple Provider처럼 Widget을 ConsumerWidget으로 바꿔준다. ref.watch() 로 사용할 Provider를 watch 해준다.

final state= ref.watch(userProfileListProvider);

그 다음, 이 return Widget 전체가 read에 의해서 다시 build된다고 생각하면 된다. 아래 예시에서는 onChange에서 read를 하고 있으므로, Checkbox가 변경될 때마다, 빌드가 새로 되므로, 그에 상응하는 데이터에 따라 UI가 업데이트된다고 보면 된다.

앱으로 본 결과는 아래와 같다.

--

--