import { createStore } from 'redux';

// 创建store的时候需要把笔记本传递给store

import reducer from './reducer';

/**

 * window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

 * 这句话的意思是如果页面上安装了redux devtools这个扩展，那么就在页面上使用这个工具

 * 有了这个工具之后，再去做redux的调试就非常方便了

 */

const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

export default store;

// 创建笔记本，笔记本里面放了很多图书馆的操作，存储数据情况

/**

 * state里面放的就是整个图书馆里面的图书信息，对于redux就是整个存储的数据

 * action

 * todolist里面创建了action这句话，到那时store并不知到怎么去改变，需要把数据传给笔记本，让笔记本告诉我怎么处理，

 * 很好的一件事情，store会自动的去传递这件事情

 * 那么这个时候就知道reducer里面这个state是什么，上一次存储的state,action是什么，传递过来的那句鹄

 */

const defaultState = {

    inputValue: '',

    list: [,]

};

/**

 * reducer 可以接收state,但是绝不能修改state，所以返回给store，store去自动替换

 * store发生改变，但页面并没有改变，需要在页面上去接收，怎么接收

 * 通过  store.subscribe 接收

 */

export default (state = defaultState, action)=> {

    if( action.type === 'change_input_value') {

        const newState = JSON.parse(JSON.stringify(state));

        newState.inputValue = action.value;

        return newState; // return给了store

    }

    if (action.type === 'add_todo_item') {

        const newState = JSON.parse(JSON.stringify(state));

        newState.list.push(newState.inputValue);

        newState.inputValue = '';

        return newState;

    }

    console.log(state, action)

    return state;

}

import React, {Component} from 'react';

import { Input, Button, List } from 'antd';

import 'antd/dist/antd.css';

import store from './store/index'

class TodoList extends Component{

    constructor(props){

        super(props);

        this.state = store.getState();

        this.handleInputChange = this.handleInputChange.bind(this);

        this.handleStoreChange = this.handleStoreChange.bind(this);

        this.handleBtnClick = this.handleBtnClick.bind(this);

        store.subscribe(this.handleStoreChange);

    }

    render() {

        return (

            <div style={{margin:'10px'}}>

                <Input

                    placeholder="todo info"

                    value={this.state.inputValue}

                    onChange = {this.handleInputChange}

                    style={{width:'300px', marginRight:'10px'}}

                />

                <Button type="primary" onClick={this.handleBtnClick}>提交</Button>

                <List

                    style={{width:'300px', marginTop:'10px'}}

                    size="small"

                    bordered

                    dataSource={this.state.list}

                    renderItem={item => (<List.Item>{item}</List.Item>)}

                />

            </div>

        )

    }

    handleInputChange(e){

        // 去改变store里面的内容，首先要创建一句话，告诉store

        const action = {

            type: 'change_input_value',

            value: e.target.value

        }

        // 那么怎么把这句话传给store呢，store里面有个方法叫做dispatch，这个方法就可以把这句话传给store

        store.dispatch(action);

    }

    handleStoreChange() {

        /**

         * 当我感知到数据发生变化的时候，我去调用store.getState()从store里面重新去取数据

         * 然后调用setState替换掉当前组件里面的数据

         */

        this.setState(store.getState())

    }

    handleBtnClick() {

        // 首先数据改变了，要去修改store里面的内容，首先要创建一个action

        const action = {

            type: 'add_todo_item'

        }

        // action创建好了，要传递过去，store会自动转发给reducer

        store.dispatch(action);

    }

}

export default TodoList;