Reactの状態管理ライブラリー「Recoil」を触ってみました

カテゴリーから探す

年別から見る

2020/11/13

Reactの状態管理ライブラリー「Recoil」を触ってみました

Recoiとは、React上でわかりやすく状態管理を行うためのライブラリーで、Reactを開発しているFacebookが開発しています。

Reactはコンポーネント指向というコンポーネント（部品）単位の構造のツリー構造によって構成されています。
元々のReactの状態管理はコンポーネント単位が基本ですが、親の状態が子孫の状態に反映される場合も頻繁にあり、そういった場合は親 > 子のように情報を伝達する仕組みを使う必要がありました。
しかしこのツリー構造が深く広くなるほどその伝達は親 > 子 > 孫 > ひ孫 > … のように複雑なものとなっていき、管理が難しくなります。
また状態管理で推奨されるアーキテクチャの Flux は情報の流れを確実なものにしますが、そのためのプログラムの設計・実装は簡単ではなく、メモリリークに繋がりやすい側面もありました。

そこで登場したのが Redux という Flux を拡張し、状態管理をグローバルに扱えるようにしてくれるライブラリでした。
この動きを受けて、Reactに公式としてReduxと同様に状態管理できる仕組みとして導入されたのが Context API です（過去に試してみた記事はこちら）。
公式ということもあり、ContextAPIは浸透してきましたが、まだ問題がありました。
ContextAPIはひとつのRootに一つの状態しか格納できなため、複数の状態を格納するためには複数のContextを用意する必要がありました。またこの構造は、コンポーネント指向のメリットであるコードの分割を困難にしてしまいます。
また、非同期なデータに対するサポートも含まれていなかったため、非同期に対応させるためにノウハウが必要でした。

こういった問題を解決するべくRecoilが登場してきました。
RecoilはひとつのRootを設置するだけで、複数のグローバルな状態を格納することができる仕組みを提供してくれます。
また、非同期をサポートしているため、非同期への対応に独自のノウハウも必要ありません。
[2020.12.04追記] 非同期に対応させる方法に関する記事を追加しました

私も試しに触ってみましたが、ContextAPIと比べると格段に簡単に利用することができました。

↓公式のチュートリアルをベースに試しに作ってみたDEMO
DEMO

試すにあたって、以下のサイトを参考にさせていただきました。

Installation | Recoil

Recoil the next state management library for React | by Tharaka Romesh | The Startup | Medium

Recoil vs Redux | The Ultimate React State Management Face-Off | by Chandu | Medium

Recoil – Reactの新しい状態管理ライブラリ | infoQ

Recoil – Facebook’s own State Management Library – DEV

Recoilの導入方法はとてもシンプルです。

npm install recoil もしくは yarn add recoil によりrecoilをインストールし、AppなどのRecoilで状態管理したいツリーのルートにRecoilRootを設置します。


import React, {useState} from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
  useSetRecoilState,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <main className="mainContent">
        <TodoList />
      </main>
    </RecoilRoot>
  );
}

export default App;

import React, {useState} from 'react';

import {

RecoilRoot,

atom,

selector,

useRecoilState,

useRecoilValue,

useSetRecoilState,

} from 'recoil';

function App() {

return (

</main>

</RecoilRoot>

);

}

export default App;

その後は、atom、selectorを中心に、RecoilのAPIを使ってRecioilRoot傘下のコンポーネントから状態を登録、変更することが可能になります。

今回は主要なAPIであるatomとselectorについて説明したいと思います。

atom

状態を登録するためのAPIで、Recoilの状態管理はここから始まります。


const todoListState = atom({
  key: 'todoListState',
  default: []
});

const todoListState = atom({

key: 'todoListState',

default: []

});

キー(key)と初期値(default)をオブジェクトとして引数に渡してあげるだけで、登録できます。
今回の例はtodoListなのでデフォルト値が空の配列ですが、
数値や文字列などを直接値として設定することも可能です。

selector

現在の状態からデータを処理して返すオブジェクトを登録するためのAPIです。フィルターなどに使うことができます。


const filteredTodoListState = selector({
  key: 'filteredTodoListState',
  get: ({get}) => {
    const filter = get(todoListFilterState);
    const list = get(todoListState);

    switch (filter) {
      case 'Show Completed':
        return list.filter((item) => item.isComplete);
      case 'Show Uncompleted':
        return list.filter((item) => !item.isComplete);
      default:
        return list;
    }
  },
});

const filteredTodoListState = selector({

key: 'filteredTodoListState',

get: ({get}) => {

const filter = get(todoListFilterState);

const list = get(todoListState);

switch (filter) {

case 'Show Completed':

return list.filter((item) => item.isComplete);

case 'Show Uncompleted':

return list.filter((item) => !item.isComplete);

default:

return list;

}

});

状態の取得には useRecoilState を使います。


const [todoList, setTodoList] = useRecoilState(todoListState);

1	const [todoList, setTodoList] = useRecoilState(todoListState);

値の取得には useRecoilValue を使います。


const todoList = useRecoilValue(filteredTodoListState);

1	const todoList = useRecoilValue(filteredTodoListState);

selector で処理したデータを取得するためには useRecoilState の引数にselectorで登録したオブジェクトを指定します。


const [filter, setFilter] = useRecoilState(todoListFilterState);

1	const [filter, setFilter] = useRecoilState(todoListFilterState);

状態の更新は useSetRecoilState で取得した関数を利用して行います。


const setTodoList = useSetRecoilState(todoListState);

setTodoList((oldTodoList) => [
  ...oldTodoList,
  {
    id: getId(),
    text: inputValue,
    createAt: new Date(),
    isComplete: false,
  },
]);

const setTodoList = useSetRecoilState(todoListState);

setTodoList((oldTodoList) => [

...oldTodoList,

{

id: getId(),

text: inputValue,

createAt: new Date(),

isComplete: false,

]);

コンポーネントのどこからでも扱える分、データの整理に注意が必要にはなりますが、
使い勝手はとてもいいと感じました。
今回は試すところまでできませんでしたが、非同期をサポートしているのもかなり大きいと思います。（ContextAPIで試したときはかなり苦労しました）

以下、ご参考までに今回試しに作ったTodoListのコード全文です。


import React, {useState} from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
  useSetRecoilState,
} from 'recoil';
import './App.scss';

type TodoListType = {
  id: number,
  text: string,
  createAt: Date,
  completedAt?: Date,
  isComplete: boolean
}

const defaultTodoListState:TodoListType[] = [];

const todoListState = atom({
  key: 'todoListState',
  default: defaultTodoListState
});


const todoListFilterState = atom({
  key: 'todoListFilterState',
  default: 'Show All',
});

const filteredTodoListState = selector({
  key: 'filteredTodoListState',
  get: ({get}) => {
    const filter = get(todoListFilterState);
    const list = get(todoListState);

    switch (filter) {
      case 'Show Completed':
        return list.filter((item) => item.isComplete);
      case 'Show Uncompleted':
        return list.filter((item) => !item.isComplete);
      default:
        return list;
    }
  },
});

function TodoList() {
  const todoList = useRecoilValue(filteredTodoListState);

  return (
    <div className="todoList">
      <TodoListStats />
      <TodoListFilters />
      <TodoItemCreator />

      <ul className="todoList__list">
        {todoList.map((todoItem) => (
          <TodoItem key={todoItem.id} item={todoItem} />
        ))}
      </ul>
    </div>
  );
}
function TodoItemCreator() {
  const [inputValue, setInputValue] = useState('');
  const setTodoList = useSetRecoilState(todoListState);

  const addItem = () => {
    setTodoList((oldTodoList) => [
      ...oldTodoList,
      {
        id: getId(),
        text: inputValue,
        createAt: new Date(),
        isComplete: false,
      },
    ]);
    setInputValue('');
  };

  const onChange = ({target: {value}}: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(value);
  };

  return (
    <p className="todoListCreator">
      <input type="text" value={inputValue} onChange={onChange} />
      <button onClick={addItem}>Add</button>
    </p>
  );
}

let id = 0;
function getId() {
  return id++;
}

function TodoItem({item}: {
  key: number,
  item: TodoListType
}) {
  const [todoList, setTodoList] = useRecoilState(todoListState);
  const index = todoList.findIndex((listItem) => listItem === item);

  const editItemText = ({target: {value}}: React.ChangeEvent<HTMLInputElement>) => {
    const newList = replaceItemAtIndex(todoList, index, {
      ...item,
      text: value,
    });

    setTodoList(newList);
  };

  const toggleItemCompletion = () => {
    const newList = replaceItemAtIndex(todoList, index, {
      ...item,
      completedAt: !item.isComplete ? new Date() : undefined,
      isComplete: !item.isComplete,
    });

    setTodoList(newList);
  };

  const deleteItem = () => {
    const newList = removeItemAtIndex(todoList, index);

    setTodoList(newList);
  };

  return (
    <li className="todoList__item">
      <input type="text" value={item.text} onChange={editItemText} />
      &nbsp;<input
        type="text"
        size={ 8 }
        readOnly
        value={ ( '00' + (item.createAt as Date).getHours() ).slice( -2 ) + ':' + ( '00' + (item.createAt as Date).getMinutes() ).slice( -2 ) + ':' + ( '00' + (item.createAt as Date).getSeconds() ).slice( -2 ) }
      />
      <input
        type="checkbox"
        checked={item.isComplete}
        onChange={toggleItemCompletion}
      />
      <input
        type="text"
        size={ 8 }
        readOnly
        value={ typeof item.completedAt != 'undefined' ? ( '00' + (item.completedAt as Date).getHours() ).slice( -2 ) + ':' + ( '00' + (item.completedAt as Date).getMinutes() ).slice( -2 ) + ':' + ( '00' + (item.completedAt as Date).getSeconds() ).slice( -2 ) : '' }
      />&nbsp;
      <button className="delete" onClick={deleteItem}>X</button>
    </li>
  );
}

function replaceItemAtIndex(todoList: TodoListType[], index: number, newValue: TodoListType) {
  return [...todoList.slice(0, index), newValue, ...todoList.slice(index + 1)];
}

function removeItemAtIndex(todoList: TodoListType[], index: number) {
  return [...todoList.slice(0, index), ...todoList.slice(index + 1)];
}

function TodoListFilters() {
  const [filter, setFilter] = useRecoilState(todoListFilterState);

  const updateFilter = ({target: {value}}: React.ChangeEvent<HTMLSelectElement>) => {
    setFilter(value);
  };

  return (
    <p className="todoListFilter">
      <span className="todoListFilter__label">Filter:</span>
      <select value={filter} onChange={updateFilter}>
        <option value="Show All">All</option>
        <option value="Show Completed">Completed</option>
        <option value="Show Uncompleted">Uncompleted</option>
      </select>
    </p>
  );
}


const todoListStatsState = selector({
  key: 'todoListStatsState',
  get: ({get}) => {
    const todoList = get(todoListState);
    const totalNum = todoList.length;
    const totalCompletedNum = todoList.filter((item) => item.isComplete).length;
    const totalUncompletedNum = totalNum - totalCompletedNum;
    const percentCompleted = totalNum === 0 ? 0 : totalCompletedNum / totalNum;

    return {
      totalNum,
      totalCompletedNum,
      totalUncompletedNum,
      percentCompleted,
    };
  },
});

function TodoListStats() {
  const {
    totalNum,
    totalCompletedNum,
    totalUncompletedNum,
    percentCompleted,
  } = useRecoilValue(todoListStatsState);

  const formattedPercentCompleted = Math.round(percentCompleted * 100);

  return (
    <ul className="todoListStats">
      <li>Total items: <span className="todoListStats__value">{totalNum}</span></li>
      <li>Items completed: <span className="todoListStats__value">{totalCompletedNum}</span></li>
      <li>Items not completed: <span className="todoListStats__value">{totalUncompletedNum}</span></li>
      <li>Percent completed: <span className="todoListStats__value">{formattedPercentCompleted}%</span></li>
    </ul>
  );
}

function App() {
  return (
    <RecoilRoot>
      <main className="mainContent">
        <TodoList />
      </main>
    </RecoilRoot>
  );
}

export default App;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

import React, {useState} from 'react';

import {

RecoilRoot,

atom,

selector,

useRecoilState,

useRecoilValue,

useSetRecoilState,

} from 'recoil';

import './App.scss';

type TodoListType = {

id: number,

text: string,

createAt: Date,

completedAt?: Date,

isComplete: boolean

}

const defaultTodoListState:TodoListType[] = [];

const todoListState = atom({

key: 'todoListState',

default: defaultTodoListState

});

const todoListFilterState = atom({

key: 'todoListFilterState',

default: 'Show All',

});

const filteredTodoListState = selector({

key: 'filteredTodoListState',

get: ({get}) => {

const filter = get(todoListFilterState);

const list = get(todoListState);

switch (filter) {

case 'Show Completed':

return list.filter((item) => item.isComplete);

case 'Show Uncompleted':

return list.filter((item) => !item.isComplete);

default:

return list;

}

});

function TodoList() {

const todoList = useRecoilValue(filteredTodoListState);

return (

{todoList.map((todoItem) => (

))}

</ul>

</div>

);

}

function TodoItemCreator() {

const [inputValue, setInputValue] = useState('');

const setTodoList = useSetRecoilState(todoListState);

const addItem = () => {

setTodoList((oldTodoList) => [

...oldTodoList,

{

id: getId(),

text: inputValue,

createAt: new Date(),

isComplete: false,

]);

setInputValue('');

};

const onChange = ({target: {value}}: React.ChangeEvent<HTMLInputElement>) => {

setInputValue(value);

};

return (

</p>

);

}

let id = 0;

function getId() {

return id++;

}

function TodoItem({item}: {

key: number,

item: TodoListType

}) {

const [todoList, setTodoList] = useRecoilState(todoListState);

const index = todoList.findIndex((listItem) => listItem === item);

const editItemText = ({target: {value}}: React.ChangeEvent<HTMLInputElement>) => {

const newList = replaceItemAtIndex(todoList, index, {

...item,

text: value,

});

setTodoList(newList);

};

const toggleItemCompletion = () => {

const newList = replaceItemAtIndex(todoList, index, {

...item,

completedAt: !item.isComplete ? new Date() : undefined,

isComplete: !item.isComplete,

});

setTodoList(newList);

};

const deleteItem = () => {

const newList = removeItemAtIndex(todoList, index);

setTodoList(newList);

};

return (

 <input

type="text"

size={ 8 }

readOnly

value={ ( '00' + (item.createAt as Date).getHours() ).slice( -2 ) + ':' + ( '00' + (item.createAt as Date).getMinutes() ).slice( -2 ) + ':' + ( '00' + (item.createAt as Date).getSeconds() ).slice( -2 ) }

<input

type="checkbox"

checked={item.isComplete}

onChange={toggleItemCompletion}

<input

type="text"

size={ 8 }

readOnly

value={ typeof item.completedAt != 'undefined' ? ( '00' + (item.completedAt as Date).getHours() ).slice( -2 ) + ':' + ( '00' + (item.completedAt as Date).getMinutes() ).slice( -2 ) + ':' + ( '00' + (item.completedAt as Date).getSeconds() ).slice( -2 ) : '' }

</li>

);

}

function replaceItemAtIndex(todoList: TodoListType[], index: number, newValue: TodoListType) {

return [...todoList.slice(0, index), newValue, ...todoList.slice(index + 1)];

}

function removeItemAtIndex(todoList: TodoListType[], index: number) {

return [...todoList.slice(0, index), ...todoList.slice(index + 1)];

}

function TodoListFilters() {

const [filter, setFilter] = useRecoilState(todoListFilterState);

const updateFilter = ({target: {value}}: React.ChangeEvent<HTMLSelectElement>) => {

setFilter(value);

};

return (

<span className="todoListFilter__label">Filter:</span>

<option value="Show Completed">Completed</option>

<option value="Show Uncompleted">Uncompleted</option>

</select>

</p>

);

}

const todoListStatsState = selector({

key: 'todoListStatsState',

get: ({get}) => {

const todoList = get(todoListState);

const totalNum = todoList.length;

const totalCompletedNum = todoList.filter((item) => item.isComplete).length;

const totalUncompletedNum = totalNum - totalCompletedNum;

const percentCompleted = totalNum === 0 ? 0 : totalCompletedNum / totalNum;

return {

totalNum,

totalCompletedNum,

totalUncompletedNum,

percentCompleted,

};

});

function TodoListStats() {

const {

totalNum,

totalCompletedNum,

totalUncompletedNum,

percentCompleted,

} = useRecoilValue(todoListStatsState);

const formattedPercentCompleted = Math.round(percentCompleted * 100);

return (

<li>Total items: <span className="todoListStats__value">{totalNum}</span></li>

<li>Items completed: <span className="todoListStats__value">{totalCompletedNum}</span></li>

<li>Items not completed: <span className="todoListStats__value">{totalUncompletedNum}</span></li>

<li>Percent completed: <span className="todoListStats__value">{formattedPercentCompleted}%</span></li>

</ul>

);

}

function App() {

return (

</main>

</RecoilRoot>

);

}

export default App;

Author Profile

NINOMIYA

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。

2024/12/06

UXに大事なアフォーダンス(Affordances)・シグニファイア(Signifires)・フィードバック(Feedback) とそれぞれの改善について

2024/11/20

Figmaが注目される理由とは？WEBデザイナーが使ってみた感想

2024/10/25

Gulpを使ったプロジェクトの基本設定とSass導入手順

2024/10/11

Difyを用いたチャットボットを作成してみた

Company

Our Solutions

Support

News

Blog

カテゴリーから探す

年別から見る

Reactの状態管理ライブラリー「Recoil」を触ってみました

atom

selector

合わせて読みたい

2024/10/11

2024/09/13

2024/08/30

2024/08/02

2024/12/06

2024/11/20

2024/10/25

2024/10/11

2024/09/13

2024/08/30

2024/08/02

2024/12/06

2024/11/20

2024/10/25

2024/10/11

2024/09/13

2024/08/30

2024/08/02