Redux video チュートリアル


videoチュートリアル本体

https://egghead.io/courses/getting-started-with-redux

完成系のgitリポジトリ

https://github.com/sadams/todo-redux-react-webpack

ダイジェストが書かれたノート

https://github.com/tayiorbeii/egghead.io_redux_course_notes

だいたいわかったら12からやればいい。

14からが結構難しい。reducerを合体させる。しかもstateがオブジュエクトの場合。todoAppという上位のリデューサーに統合している。これはstateがなんとオブジェクト。

17リアクト連携

26 Redux: storeをReact Redux の<provider>を用いて下層へと渡していく

Redux: Passing the Store Down with <Provider> from React Redux

https://egghead.io/lessons/javascript-redux-passing-the-store-down-with-provider-from-react-redux

In the previous session, we implemented the provider component that uses the react advanced context feature to make this tool from the props available to every component in our rev.

一つ前のレッスンにおいて、私たちは provider コンポーネントを実装しました。これは react の アドヴァンスドな contect 機能を用いて、props をどのコンポーネントからも利用できるようにするものでした。

If we pass it through the provider, we can read it in any other component from the context, which is really convenient for the container components. In fact, this is so convenient that you don’t need to actually write the provider yourself, because it is included in a special library called React-Redux.

provider を通して値を渡すことで、どのコンポーネントからも context を通じて値を取得できるので、コンテナーコンポーネントにとってこれは非常に便利なことです。でも実は、 provider を自分自身で書く必要もありません。React-Redux という別のライブラリーにこの機能があるからです。

Note that it is not the same as Redux. This is a different library. These are react bindings to the Redux library. You can import the provider by destructuring the react-redux global object in JS bin, or if you use Babel, and something like NPM, you can import provider with the braces, because it’s a named expert from React-Redux package. Or if you write ES5 code, you can write var provider equals require react redux, or react redux global.provider.

注意して欲しいのですが、これは Redux とは別のライブラリーです。React-Redux は react とRedux をつなぐ効能を提供します。これを使うためには react-react global object を分解して provider を import するか(const Provider = ReactRedux;)、もしくは Babel と npm などを使っているのであれば、provider を{} を使ってインポートしましょう。(import {Provider} = ‘react-redux’;) このようにかけるのは、React-Redux の中でそのように名前が定義されているからです。さらに他の方法としてES5で書いているのであれば、var Provider = require(‘react-redux’).Provider; とします。

Just like the provider we wrote before, the provider that comes with react-redux exposes this store you passed through. There’s a prop on the context so the components can specify the context types, and then use this context store to subscribe to the store updates and dispatch actions.

前のレッスンで我々が書いた providerと同じように、react-redux によって提供される provider も redux の store を露出させます。(わからない。おそらく前のレッスンでcontext等を理解する必要がある。⇨) There’s a prop on the context so the components can specify the context types, and then use this context store to subscribe to the store updates and dispatch actions. とにかく結論としては、store のアップデートとディスパッチをreactに紐付ける。その際に context が関係してくる。

27 Redux: React-Reduxのconnect()を用いたコンテナを生成する

Redux: Generating Containers with connect() from React Redux (VisibleTodoList)

In the previous lesson, I added React Redux bindings to the project and I used a provider component from React Redux to pass this chore down the context so that the container components can re-dischore from the context and subscribe to these changes. All container components are very similar.

ここまでのレッスンにおいて、React Redux の bindings をプロジェクトに加えたので、

They need to re-render when the store state changes, they need to unsubscribe from the straw when they amount and they take the current state of the Redux store and use it to render the presentational components with some props that they calculate from the state of this chore, and they also need to specify the context stripes to get this chore from the context.

?外したりつけたり?

I’m going to write this component in a different way now. I’ll declare a function called “MapsStateToProps” which takes the redux store state and returns the props that I need to parse through the presentation to do this component, to render it with the current state.

ですが今回は少し違った方法でコンポーネントを書いていきます。まずは MapsStateToProps という名前の関数を宣言します。これはredux の state を受け取ってprops を return するためのものです。そしてこの props は presantation で分解されコンポーネントへ渡され、現在の状態によってレンダーされます。

In this case, there is a single prop called ToDo. I copy-paste this expression to the MapStateToProps function. It returns the props that depend on the current state of the redux store. In this case, this is just the ToDo list prop.

components/TodoList.jsx の TodoListというコンポーネントはToDOという名前のpropだけを用いていますね。これをコピペして、MapStateToPropsに加えます。そうすることで 現在のredux storeの状態に基づいたpropsを返し、Todoという名前で使うことができるようになります。(ただしの後の作業、connect()を行った後に。)

const mapStateToProps = (
  state
) => {
  return {
    todos: getVisibleTodos(
      state.todos,
      state.visibilityFilter
    )
  };
};

I’m creating another function that a core map dispatched the props. It accepts the dispatch method from this chore as the only argument and returns the props that should be parsed through the list component and that depend on the dispatch method.

The only prop that uses chore dispatch is called OnToDo click. Some copy-paste onto the click, into map dispatch the props. Now that I don’t have the reference to this chore here anymore. Instead, I’m changing it to use the dispatch, which is provided as an argument to map dispatch the props.

I will add some punctuation to make it appear easier on my eyes. OnToDo click ease of function that accepts the ID of the ToDo, and dispatches an action. Now, I’ve got two different functions.

The first one maps the redux chore state to the props of the ToDo list component that are related to the data from the redux chore. The second function maps the dispatch method of this chore to the callback props of ToDo list component. It specifies the behavior which callback prop dispatches which action.

To gather this, your function has described a container component so well that instead of writing it, I can generate it by using the connect function provided by react redux library. If you use Babble and NPM, you will likely input it like this instead. Don’t forget the curly braces.

Now, instead of declaring a class, I’m going to declare a variable. I will call the connect method to obtain it. I’m parsing MapsStateToProp as the first argument and MapDispatchTheProps as the second argument. Notice that this is a correct function, so I have to call it once again. This time, I parse the presentational component that I wanted to wrap and parse the props to you.

The connect function will generate the component, just like the one I previously wrote by hand. I don’t need to write the code to subscribe to this chore or to specify the context stripes, because the connect function takes care of that.

Now, let’s recap how to generate the container component using the connect function. First, I’ll write a function called MapStateToProps that takes the state of the redux chore and returns the props for the presentational component calculated from it.

These props will be updated anytime the state changes. Next, I write a function that I call MapDispatchTheProps. It takes these chores dispatch method as its first argument. It returns the props that used the dispatch method to dispatch options, so it returns the callback props needed for the presentational component.

To create the container component from them, I import connect from the react redux library and I call it parsing MapsStateToProps as the first argument and will dispatch the props as a second argument.

Finally, I close the function called Param and I open another param, because this is a parent function and it needs to be called twice. The last argument is the presentational component that I want to connect to the redux chore.

The result of the connect call is the container component that is going to render my presentational component. It will calculate the props to pass through the presentational component by merging the objects returned from MapStateToProps, map dispatched to props, and its own props.

Leave a Reply

Your email address will not be published. Required fields are marked *