react-redux

发布日期: 2021-09-28

文章字数: 527

阅读时长: 2 分

阅读次数:

1.为什么用redux

React中 ，组件的数据是单向流动的，即数据从一个方向(父组件)流向子组件(通过props)。
因此，两个非父子组件的通信就相对麻烦，redux的出现就是state数据问题。
数据存放于全局，便于统一的配置、管理和维护。

2.redux原理

触发action改变state。
state的改变均通过action来改变。（ 为reducer函数传入 state 和 action，并得到新的NewState
返回给store, store再把数据传回组 ）件。

3.redux三大原则

1. 单一的数据源
   redux思想中，一个应用永远只有一个唯一的数据源。  待续..。
2. 状态只读
   state是只读的，唯一改变state的方法就是触发action。 待续...
3. 数据改变只能通过纯函数来执行
   在redux中，通过定义reducer来确定状态的修改，而每一个reducer都是纯函数，
   这意味着它没有副作用，即接收一定的输入，一定会得到一定的输出。                                       
   待续...

4.代码

// index.ts
import { createStore } from 'redux'

import reduce from './reduce'

console.log('reduce', reduce);

const store = createStore(reduce)


export default store

// reducer.ts
import { combineReducers } from 'redux'

const initdata: [] = []

const arr: {
  item: number
}[] = [
    {
      item: 1
    },
    {
      item: 2
    }
  ]
const oneState = (state = initdata, action: any) => {
  switch (action.type) {
    case 'init':
      console.log('初始化了吗',action);
      const {data} = action
      return data
    // case 'add':

    //   return
    // case 'del':

    // return

    default:
      return state;
  }
}

const secondState = (state = arr, action: any) => {
  switch (action.type) {
    case 'first':

      return state;

    default:
      return state;
  }
}

export default combineReducers({
  oneState,
  secondState
})

// actions.ts
const initMethod = (data: any) => ({ type: 'init', data })

const aggreGate = {
  initMethod
}

export {
  aggreGate
}

// testone
interface IndexProps {
  changeState?: any,
  initMethod?: any  // 这里应该是函数的
}
const Index: React.FC<IndexProps> = ({
  changeState ,
  initMethod
}) => {
      useEffect(() => {
          // 初始化redux中的状态数据
      initMethod && initMethod(list)
  }, [])
}

// 注意redux状态变化后的程序执行顺序
// redux 状态改变 首先整个connect高价组件会先执行，然后被他包裹的组价重渲 按顺序逐行解析  父先子后
export default connect(
  (state) => {
    console.log('高阶组件的状态', state)
    return {
      changeState: state
    }
  },
  {
    ...aggreGate
  })(Index)
  // 这个return 的对象的键值会绑定到被修饰组件的props上
  // 第二个参数 的所有方法也会绑定到被修饰组件的props上