redux&react-redux（二）

store
  index.js 创建一个store容器
  views
  Lists——>这个名是看文件，语义化就好了
    redux 
    - Actions.js   返回一个或多个动作对象，一般为`{type:'',data:''}`
    - ActionsTypes.js   返回一个或多个常量，用做Actions和Reducer的type值
    - Reducer.js    返回一个纯函数，用于处理动作对象
    index.js    将actions和reducer函数集中导出(方便管理)
    index.jsx    容器组件和UI组件的结合体

import { createStore, combineReducers,applyMiddleware } from 'redux';
import thunk = 'react-thunk' //支持异步
import { reducer as lists } from '../views/Lists/_index.js'
const reducer = combineReducers({
  lists
})
let initList = JSON.parse(localStorage.getItem("LIST")) || [];
export default createStore(reducer,initList,applyMiddleware(thunk));

import React from 'react';
import App from './App';
import { Provider } from 'react-redux';
import Store from './store'
const StoreToken = Store.subscribe(() => {
  // Store.getState()
  // console.log(Store.getState())
  window.localStorage.setItem("LIST", JSON.stringify(Store.getState()))
})
//StoreToken() 这样可以取消订阅
const Router = () => {
  return (
    <div>
      <Provider store={Store}>
        <App />
      </Provider>
    </div>
  )
}
export default Router

import * as actiontypes from './actionTypes';
export const addList = (data) => ({ type: actiontypes.ADDList, data })
export const delList = (data) => ({ type: actiontypes.DELLIST, data })

export const ADDList = "ADDLIST";
export const DELLIST = "DELLIST";

import * as actionTypes from './actionTypes';
const reducer = (preState = [], action) => {
  const { type, data } = action;
  switch (type) {
    case actionTypes.ADDList:
      const result = [
        data,
        ...preState
      ]
      console.log(result)
      return result
    case actionTypes.DELLIST:
      preState.splice(data, 1)
      return [...preState]
    default:
      return preState
  }
}
export default reducer

import * as actions from './redux/actions';
import reducer from './redux/reducer';
export { actions, reducer }

import React,{Component} from 'react';
import { connect } from 'react-redux';
import * as actions from './redux/actions';
class View extends Component{
  // 渲染函数
  rLsits = () => {
    let { lists } = this.props;
    return lists.map((value, index) => (
      <li key={index}>{value} <button onClick={()=>{this.delfn(index)}}>删除</button></li>
    ))
  }
    // 添加数据
  send = () => {
    let val = this.inp.value;
    this.props.addLists(val)
    this.inp.value=""
  }
   // 删除数据
   delfn = (index) => {
     this.props.delLists(index)
  }
  render() {
    return (
      <div>
        <h2>这是一个class类组件操作数组数据的例子</h2>
        <input ref={value=>this.inp=value} type="text" />
        <button onClick={()=>{this.send()}}>发送</button>
        {this.rLsits()}
      </div>
    )
  }
}
// 写法一  mapDispatchToProps是一个对象
export default connect(
  state => ({ lists: state.lists }),
  {
    addLists: actions.addList,
    delLists: actions.delList
  }
)(View)
// 写法二   mapDispatchToProps是一个函数
// export default connect(
//   state => ({ lists: state.lists }),
//   (dispatch, ownProps) => ({
//     addLists: data => { dispatch(actions.addList(data)) },
//     delLists: data => { dispatch(actions.delList(data)) }
//   })
// )(View)
// 写法三   mapDispatchToProps为null
// 需要在UI组件内通过this.props.dispath传递action动作对象
// export default connect(
//   state => ({ lists: state.lists }),
//   null
// )(View)

import React,{useRef} from 'react';
import { useSelector, useDispatch } from 'react-redux';
import * as actions from './redux/actions'
const View = () => {
  let inp = useRef();
  const state = useSelector(state=>state)
  const dispath = useDispatch()
  const rLsits = () => {
    console.log('我执行了')
    return state.lists.map((value, index) => (
      <li key={index}>{value} <button onClick={()=>{delLists(index)}}>删除</button></li>
    ))
  }
  // 添加数据
  const send = () => {
    let val = inp.current.value;
    dispath(actions.addList(val))
    inp.current.value=""
  }
  // 删除数据
  const delLists = (index) => {
     dispath(actions.delList(index))
  }
  return (
    <div>
      <h2>这是一个函数组件操作数组数据的例子</h2>
      <input ref={inp} type="text" />
      <button onClick={send}>发送</button>
      {rLsits()}
    </div>
  )
}
export default View;