正文

react-redux不完全指北

admin
admin V管理员 /0 评论 /240 阅读
0110
此篇文章发布距今已超过682天，您需要注意文章的内容或图片是否可用！

1、首先react-redux是用来在组件之间方便传输数据以及改变数据的工具

2、常用的react-redux的方法是包含注入已经调用

3、首先在最外层包含注入

import { Provider } from 'react-redux'　　// 全局包含
ReactDOM.render(<Provider><Main /></Provider>, document.getElementById("main"))

4、创建store（类似于全局变量）

（1）基本架构

import { createStore, combineReducers } from "redux"
// 注入数据与方法
import todos from "./store/todos"
import test from "./store/test"
// 创建Store与注入
export default createStore(combineReducers({ todos, test }))

（2）数据于方法

// 初始化数据
let initialState: any = 1
// 返回数据，或者根据返回action变化返回内容
export default function (state = initialState, action: any) {
    switch (action.type) {
        case 'test':
            console.log(1)
            state = state + 1
        default:
            return state
    }
}

4、然后在最外层就可以直接加上store

import myStore from './redux'
ReactDOM.render(<Provider store={myStore}><Main /></Provider>, document.getElementById("main"))

5、接着就是每个需要用到store的页面都要加上connect（需要用到redux创建的全局变量的）

import { connect } from "react-redux"
// 第一个参数是包含全局参数的函数
// 第二个参数是需要导入对象的函数
// 这两个参数到最后都会倒回对象当中
class Test extends React.Component {
  constructor(props) {
    super(props);
  }
 // 自己导入的 this.props.addTodo
 // 自己导入的 this.props.state
 render() {
    return (
      <div>1</div>
    );
  }
}
export default connect(
    (state: any) => state,
    { addTodo }
)(Main);

6、执行方法需要注意的，需要根据你自己给到内容判断执行那个方法

// 例如现在就是以type来判断执行什么方法
export const addTodo = () => ({
    type: 'test',
})

7、刚刚讲的就是简单的react-redux的使用方法，当使用react-hook+react-redux，那么使用起来就会更加的简单（用到react-hook的createContext）　　

import { createContext } from 'react'
import { createStoreHook, createDispatchHook, createSelectorHook } from 'react-redux'
// 整体核心
export const MyContext = createContext(null)    // 创建context
export const useStore = createStoreHook(MyContext)    // 创建独有的useStore（获取全局变量用的）
export const useDispatch = createDispatchHook(MyContext)    // 创建独有的dispatch（执行方法用的）
export const useSelector = createSelectorHook(MyContext)    // 创建独有的selector（查找变量用的）

8、注入方式也有所不同

import { MyContext } from '../utils/redux-hook'
// 新增一个注入MyContext
ReactDOM.render(<Provider context={MyContext} store={myStore}><Main /></Provider>, document.getElementById("main"))

9、使用起来更加方便

// 使用方法
const Test = (props: any) => {
    const dispatch = useDispatch()
    return (
        <button onClick={() => dispatch({ type: 'test' })}>点击</button>
    )
}
// 查找元素
const Test = () => {
    const store = useStore()
    // 获取全局
    console.log(store.getState())
    // 获取个别
    const counter = useSelector((state: any) => state.test)
    return (
        <div>{counter}</div>
    )
}

　　

ZhouSa.com