react redux 简单使用

安装必要的包

bash 复制代码

npm install redux react-redux

md 复制代码

│ └─ store

│ ├─ actions // actions，文件夹内以模块区分

│ │ ├─ count.js

│ │ └─ person.js

│ ├─ constants.js // action type唯一标识常量

│ ├─ index.js // 入口文件

│ └─ reducers // reducers，文件夹内以模块区分

│ ├─ conut.js

│ ├─ index.js // reducers统一暴露文件，合并reducers

│ └─ persons.js

创建Redux Store

在你的React应用中，你需要创建一个Redux store。这个store将持有整个应用的状态。

js 复制代码

// src/store/index.js

import { createStore, applyMiddleware } from "redux";

// 用于支持异步action

import thunk from "redux-thunk";

import reducers from "./reducers";

  


export default createStore(reducers, applyMiddleware(thunk));

创建Actions

定义action对象中type类型的常量值，消除魔法字符串

js 复制代码

// src/store/constants.js

export const INCREMENT = 'increment'

export const DECREMENT = 'decrement'

创建action，普通action返回对象，异步action返回函数

js 复制代码

// src/store/actions/count.js

import { INCREMENT, DECREMENT } from "../constants";

  


// 普通action的值为object `{type: INCREMENT, data }`

export const increment = data => ({ type: INCREMENT, data });

export const decrement = data => ({ type: DECREMENT, data });

  


// 异步action的值为函数

export const incrementAsync = (data, time) => {

return (dispatch) => {

setTimeout(() => {

dispatch(increment(data));

}, time);

};

};

创建Reducers

Reducer是一个纯函数，它接收当前的state和一个action，然后返回一个新的state。

js 复制代码

// src/store/reducers/conut.js

import {INCREMENT, DECREMENT} from '../constants'

// 初始化状态

const initState = 0;

  


export default function count(preState = initState, action) {

const { type, data } = action;

switch (type) {

case INCREMENT:

return preState + data;

case DECREMENT:

return preState - data;

default:

return preState;

}

}

js 复制代码

// src/store/reducers/persons.js

import { ADD_PERSON } from "../constants";

  


const initState = [{ id: "001", name: "jona", age: "23" }];

  


export default function persons(preState = initState, action) {

const { type, data } = action;

switch (type) {

case ADD_PERSON:

// return preState.unshift(data) // 此处不可以这样写，这样会导致preState被改写了，personReducer就不是纯函数了，redux识别不到状态改变，视图不会更新了

return [data, ...preState];

default:

return preState;

}

}

js 复制代码

// src/store/reducers/index.js

import { combineReducers } from "redux";

import count from "./conut";

import persons from "./persons";

  


export default combineReducers({

count,

persons,

});

提供Store给React应用

使用Provider组件将store提供给React应用。这通常在你的应用的顶层进行。

js 复制代码

// index.js 或 App.js

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux'; // 引入Provider组件

import store from './store'; // 引入store配置文件

import App from './App'; // 引入你的主组件文件

  


ReactDOM.render(

<Provider store={store}> {/* 将store提供给应用 */}

<App /> {/* 应用组件 */}

</Provider>,

document.getElementById('root')

);

连接React组件和Redux Store

你可以使用connect函数来连接React组件和Redux store。这样，你可以在React组件中访问和修改状态。

js 复制代码

// Counter.js 组件文件，展示计数器并允许增加或减少计数器值。

import React from 'react';

import { connect } from 'react-redux'; // 引入connect函数用于连接组件和Redux store。

import { increment, decrement } from './actions'; // 引入action creators。

  


function Counter({ value, onIncrement, onDecrement }) { // 从props接收value, onIncrement, onDecrement。

return (

<div>

<h1>{value}</h1> {/* 显示当前计数器的值 */}

<button onClick={onIncrement}>+</button> {/* 点击增加计数器值 */}

<button onClick={onDecrement}>-</button> {/* 点击减少计数器值 */}

</div>

);

}

  


const mapStateToProps = state => ({ // 将state映射到props上。这里我们只需要counter的值。

value: state.counter.value, // 从store的state中获取counter的值。

});

const mapDispatchToProps = dispatch => ({ // 将dispatch方法映射到props上，以便我们可以调用它来分发action。

onIncrement: () => dispatch(increment()), // 当点击增加按钮时分发increment action。

onDecrement: () => dispatch(decrement()), // 当点击减少按钮时分发decrement action。

});

  


export default connect(mapStateToProps, mapDispatchToProps)(Counter); // 连接Counter组件和Redux store。