下载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