React中Redux 的详解和使用

下载react脚手架，创建项目

Redux + Plain JS template

npx create-react-app my-app --template redux

Redux + TypeScript template

npx create-react-app my-app --template redux-typescript

下载redux

If you use npm:

npm install react-redux

Or if you use Yarn:

yarn add react-redux

如果您使用的是 TypeScript，React Redux 类型会在绝对类型中单独维护，
但作为react-redux包的依赖项包含在内，因此应自动安装它们。如果您仍然
需要手动安装它们

npm install @types/react-redux

具体操作查看redux官方文档：https://react-redux.js.org/introduction/getting-started

dispatch: ? dispatch(action)
getState: ? getState()
replaceReducer: ? replaceReducer(nextReducer)

store实例的api

store.dispatch 触发countReducer里状态更改的唯一方法

store.getState 获得countReducer 返回给store状态，然后由store再返还给自己的状态

store.subscribe 订阅 监听redux 默认接受一个回调 如果redux状态发生改变都会出发redux

创建store.js文件

// 接受一个参数 countReducer 传入store的实例对象中 在使用的地方通过dispatch来改变状态

// 调用store.dispatch来调度一个动作。这是触发状态更改的唯一方法。

// 创建store实例 暴露countReducer处理过后状态的返回值

// 引入createStore 和 contReducer 创建store 并将 countReducer 传参传进去

import { createStore } from "redux";
import countReducer from "../countReducer";

const store = createStore(countReducer)
export default store

创建countReducer.js文件

export default function countReducer(preState, action){
    // console.log("默认初始化一次")
    const {type, data} = action
    console.log(preState, action)
    if(type == "add"){
        console.log(preState,data)
        return preState + data
    }

// console.log("默认初始化一次")
// countReducer 默认会初始化执行一次 这个方法接受两个参数 
// 第一个参数：默认第一次是undefined 第一次之后就是上一次return出去的状态
// 第二个参数是：传入进来的调用store.dispatch传进来的对象
return 20

}

在要用到全局状态的地方引入store文件

import store from "../../store";

//引入store

export default class Fn extends React.Component {

	render() {
        return <div className="headerBox">

            {console.log("countReducer返还的数据", store.getState())}

            <button onClick={()=>{store.dispatch({ type: "add", data: 1 })}}>发送</button>
        </div>
    }
}

监测redux里的状态，如果redux里的状态发生改变都会触发store.subscribe里的回调

修改redux里状态 视图不会同步更新

1.当redux里状态更新，更新状态，视图会自动更新

 componentDidMount() {
        store.subscribe(()=>{
            console.log("countReducer里的状态更新了")
            this.setState({})
        })
    }

2. 在项目的index.js 主入口文件

引入 store 然后监听redux里的状态，如果状态发生改变就调用全局的组件render

store.subscribe(()=>{
  console.log("我在index里监测redux")
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );
})

创建专门创建action对象的文件

返回对象形式是同步action 返回函数是异步action

同步action

export function createadd(data){
    return {type:"add",data}
}

export function createSub(data){
    return {type:"sub",data}
}

异步action

export const createAsync = ()=>{
	return () => {

	在return的函数内进行异步操作	  

  }
}

在调用store.dispatch 文件引用

里面的方法

npm install redux-thunk

redux-thunk 用于支持异步action

import thunk from 'redux-thunk'

import { applyMiddleware } from redux

在从redux身上引入中间键

import { createStore, applyMiddleware } from "redux";
import countReducer from "../countReducer";
import thunk from 'redux-thunk'

const store = createStore(countReducer, applyMiddleware(thunk))

// applyMiddleware 作为第二个参数传进去并掉用 把thunk 当做参数传进去 就可以使用异步的action

export default store