[Redux] 配列にデータを追加できません！console.logはどこへ書くのが最適ですか？

#はじめに
質問を見てくださってありがとう御座います。

Reactの初心者です。
Reduxを使ってみようと練習しています。

#困っていること

・<input />に入力した文字が、上手く配列に追加できていません。

そして現在は、下記コードでdispatch毎にstateの中身を監視しています。

js
1store.subscribe(() => console.log(store.getState()));

consoleでみると配列の中身はカラです。

#実際のコード

考えられる問題箇所にコメントしています。
また、Redux導入の練習中なのでファイルは一箇所にまとめています。

js
1import React from "react";
2import { render } from "react-dom";
3import ReactDOM from "react-dom";
4import { createStore, applyMiddleWare } from "redux";
5
6import "./styles.css";
7
8// 初期値の設定
9const initialState = {
10  task: "",
11  tasks: []
12};
13
14// Reducer
15function tasksReducer(state = initialState, action) {
16  switch (action.type) {
17    case "INPUT_TASK":
18      return {
19        ...state,
20        task: action.payload.task
21      };
22
23    //　下記のaction.payload.taskに値が入っていない？？
24    // コンソールで中身を見たいがどこに書けば良いのかわからない。
25    case "ADD_TASK":
26      return {
27        ...state,
28        tasks: state.tasks.concat([action.payload.task])
29      };
30    default:
31      return state;
32  }
33}
34
35// store
36const store = createStore(tasksReducer);
37
38// dispatchの度にstateの中身を監視できる
39store.subscribe(() => console.log(store.getState()));
40
41// Action Creator
42const inputTask = task => ({
43  type: "INPUT_TASK",
44  payload: {
45    task
46  }
47});
48const addTask = task => ({
49  type: "ADD_TASK",
50  payload: {
51    task
52  }
53});
54
55// コンポーネント
56function TodoApp({ store }) {
57  const { task, tasks } = store.getState();
58  return (
59    <>
60      <div>
61        <input
62          type="text"
63          onChange={e => store.dispatch(inputTask(e.target.value))}
64        />
65        <input
66          type="button"
67          value="add"
68          onClick={() => store.dispatch(addTask(task))}
69        />
70      </div>
71      <ul>
72        {tasks.map(function(item, i) {
73          return <li key={i}>{item}</li>;
74        })}
75      </ul>
76    </>
77  );
78}
79
80function renderApp(store) {
81  render(<TodoApp store={store} />, document.getElementById("root"));
82}
83
84store.subscribe(() => renderApp(sore));
85renderApp(store);
86

#質問

####Q1.なぜ配列にデータが入らないのか教えて頂きたいです。

####Q2.Ruduxのデバックの際、どこへconsole.logを書くのが最適でしょうか？

#最後に
最後まで読んでくださりありがとうございます。
ご回答宜しくお願いします。

jun68ykt

2019/01/07 19:12

こんにちは。wilfさんが回答に書いておられますが、sore を storeに修正すると意図通りに動きました。参考までに次のURL https://git.io/fhGPN に画面キャプチャを上げておきます。これは「テスト」と入力してから add をクリック、その後、「テスト」を消してから「あいうえお」と入力してからaddをクリックしたときの画面です。