スポンサーリンク
Youtube

Reactでredux を使用できるようにする!!TODOリスト開発中

引き続き、React でTODOリストを開発しています。

今回は、redux をReact で使用できるように改修していきます

redux 難しい〜〜〜〜!

まだまだ処理の流れが頭の中で整理されていない感じがします。

ただ、redux でstateを管理できるようになると、すべてのコンポーネントで、同じ値を参照するようになるので、アプリ開発においては、必須の知識でしょう。

ポイントだけ、コード書いておきます。

index.js

import { Provider } from "react-redux";
//省略
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
import { Provider } from "react-redux"; //省略 render( <Provider store={store}> <App /> </Provider>, document.getElementById("root") );
import { Provider } from "react-redux";
//省略

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

まずはreact-reduxをインストールして、

親コンポーネントをreact-redux のProvider で囲ってあげること

Providerにはstoreも渡しておく

app.js

import { connect } from "react-redux";
//省略
const mapStateToProps = state => {
return { todos: state };
};
const mapDispatchToProps = dispatch => {
return {
addTodo: text => {
dispatch(addTodo(text));
}
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);
import { connect } from "react-redux"; //省略 const mapStateToProps = state => { return { todos: state }; }; const mapDispatchToProps = dispatch => { return { addTodo: text => { dispatch(addTodo(text)); } }; }; export default connect( mapStateToProps, mapDispatchToProps )(App);
import { connect } from "react-redux";

//省略

const mapStateToProps = state => {
  return { todos: state };
};

const mapDispatchToProps = dispatch => {
  return {
    addTodo: text => {
      dispatch(addTodo(text));
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

各コンポーネントには、react-redux のconnect を使用

state を参照するための関数と、

stateを更新するための関数(dispatch実行用関数)を用意して、

export default connect( mapStateToProps, mapDispatchToProps )(App);
Code language: JavaScript (javascript)

connect関数の引数に渡して、Appをコネクトする

この書き方は、覚えてしまった方がいいかな

こうすることで、

const App = ({ todos, addTodo }) => {
Code language: JavaScript (javascript)

App で、関数の引数として取得できるようになるというわけ

今回、formタグにonSubmit を追加しましたが、

これも新たな知識として、おさえておく

<form
onSubmit={e => {
e.preventDefault();
if (!input.value.trim()) {
return;
}
addTodo(input.value);
input.value = "";
}}
>
<input type="text" className="input" ref={node => (input = node)} />
<button type="submit" className="btn-default">
追加
</button>
</form>
<form onSubmit={e => { e.preventDefault(); if (!input.value.trim()) { return; } addTodo(input.value); input.value = ""; }} > <input type="text" className="input" ref={node => (input = node)} /> <button type="submit" className="btn-default"> 追加 </button> </form>
<form
    onSubmit={e => {
        e.preventDefault();
        if (!input.value.trim()) {
        return;
        }
        addTodo(input.value);
        input.value = "";
    }}
    >
    <input type="text" className="input" ref={node => (input = node)} />
    <button type="submit" className="btn-default">
        追加
    </button>
</form>

それにしても、毎日コツコツ学習すると1週間でもかなりスキルアップできますね。

毎日コツコツやること、大事