import {createStore} from 'redux';

import reducer from './reducer'

// 引入后的reducer store是唯一的

const store = createStore(reducer);

export default store;

import {combineReducers} from 'redux';

import numReducer from './num/reducer'

import todosReducer from './todos/reducer';

// 拿到单个模块的reducer 进行合并 传给store

let reducer = combineReducers({

    num:numReducer,

    todos:todosReducer

});

export default reducer;

// 用来存储当前模块下的数据

const state = {

    list:[],

    count:0

}

export default state;

// 将state导入 建立reducer函数

import _state from './state';

let reduce = (state=_state,action)=>{

    console.log(action);

    let newState = {...state};

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

        newState.count = ++newState.count;

        newState.list.push(action.title)

    }

    return newState;

}

// reducer 用来处理state里面的数据  数据的验证是通过action这个参数里的type进行的。

// action这个参数的传递是通过store.dispatch来分发的。

export default reduce;

// 主要作用是返回一个对象 让actions 来使用

// p 是传递的参数

const action = {

    ADD(p){

        return {

            type :'ADD', //这里的ADD的type是与reducer里的验证有关

            title:p

        }

    }

}

export default action;

import action from './action';

import store from '../store';

// 将传递的action参数引入

// 将store引入 把action参数传给reducer。

const actions = {

    // p 是页面传来的值

    addItem(p){

        // 将action的里面对象传递参数

        let act = action.ADD(p);

        // 使用store把action里面的对象 作为参数传递过去

        store.dispatch(act);

    }

}

export default actions;

import React, { Component } from 'react';

import './App.css';

import store from './redux/store'

import actions from './redux/num/actions'

import actions1 from './redux/todos/actions'

// ui 组件 只取数据

class App extends Component {

  constructor(props){

    super(props);

    this.state = {

      n:store.getState().num.n,

      list:store.getState().todos.list

    }

    store.subscribe(()=>{

      //只要数据变化了这个回调函数就会执行

      this.setState({

        n:store.getState().num.n

      });

      this.setState({

        list:store.getState().todos.list

      })

    })

    this.inc = this.inc.bind(this);

    this.add = this.add.bind(this);

  }

  inc(){

    // console.log(actions.dispatchAction)

    actions.dispatchAction()

  }

  add(){

    actions1.addItem(this.node.value);

    this.node.value = '';

  }

  render() {

    return (

      <div className="App" onClick={this.inc}>

        { this.state.n}

        <input type="text" ref={node=>this.node=node}/>

        <button onClick={this.add}>add</button>

        {

          this.state.list.map((item,index)=>{

             return (

                <div key={index}>

                  {item}

                </div>

             )

          })

        }

      </div>

    );

  }

}

export default App;