diff --git a/source/_posts/en/practice/san-store-spa.md b/source/_posts/en/practice/san-store-spa.md index 27a8efa..4e86b20 100644 --- a/source/_posts/en/practice/san-store-spa.md +++ b/source/_posts/en/practice/san-store-spa.md @@ -1,61 +1,61 @@ --- -title: 如何使用 san-store 实现后台系统的状态管理? +title: How to use san-store to implement state management of the backend system? categories: - practice --- -#### 引言 -首先确保已经理解了[san-store](https://github.com/baidu/san-store) 中是否需要状态管理的内容以及相关概念,下面开始。 +#### Introduction +First make sure you understand the necessity of state management content and related concepts in [san-store](https://github.com/baidu/san-store). Here we go. -本项目代码在 [https://github.com/jiangjiu/san-store-spa](https://github.com/jiangjiu/san-store-spa) 可以查看。 +This project code can be viewed in [https://github.com/jiangjiu/san-store-spa](https://github.com/jiangjiu/san-store-spa). -#### 搭建环境 -上一篇文档 [如何使用 san-router 建立一个单页应用的后台系统?](https://baidu.github.io/san/practice/san-router-spa/) 已经搭建了一个san+san-router的单页后台应用,我们在它的基础上加入san-store来管理应用状态。 +#### Setup +The previous document [How to use san-router to create a back-end system for a single-page application?](https://baidu.github.io/san/practice/san-router-spa/) has built a single-page back-end application with san+san-router. We added san-store to manage the application state based on it. ```js - // 只需安装san-store和san-update + // only need to install san-store and san-update npm i san-update san-store --save ``` -#### 状态设计 -目前系统有三个频道,home、about、list。 +#### State design +Currently the system has three channels, home, about, and list. -假设这是一个类似电商后台管理订单的系统: +Suppose this is a system similar to e-commerce back-office orders management -1. 不同的频道都需要同步当前订单的状态(待付款、待发货、交易完成 => orderState:1、2、3) -2. 不同频道有权利修改当前订单状态 -3. 每次修改都需要异步请求到服务端进行确认 +1. Different channels need to synchronize the status of the current order (pending payment, pending delivery, transaction completed => orderState:1、2、3) +2. Different channels have the permission to modify the current order status +3. Each modification requires an asynchronous request to the server for confirmation -这里的状态管理混合了异步请求,为了简单起见,暂不考虑安全性及异常处理。 +The state management here mixes asynchronous requests, and for the sake of simplicity, security and exception handling are not considered. -#### 思考 -如果不使用san-store,每一个频道都需要自行发起异步请求,同时要和其他频道通信当前的订单状态,在实际业务中会是件很头疼的事儿。 +#### Thinking +If you do not use san-store, each channel needs to initiate an asynchronous request by itself, and it is a headache in the actual business to communicate the current order status with other channels. -使用san-store后,异步请求在action中发起而无需在不同组件中分别处理,同时store作为唯一应用状态源,无需考虑信息同步问题,系统流程清晰很多,简单可靠。 +After using san-store, asynchronous requests are initiated in the action without having to deal with them separately in different components. At the same time, store is the only application state source, no need to consider the information synchronization problem, the system flow is clear, simple and reliable. -#### 创建store -首先新建一个文件来初始化和管理store。 +#### Create store +First create a new file to initialize and manage the store. ```js // store.js import {updateBuilder} from 'san-update/src/index'; import {store} from 'san-store'; -// 第一个action,处理边界条件和异步请求 +// First action: handling boundary conditions and asynchronous requests store.addAction('changeOrderState', (state, {getState, dispatch}) => { - // 取出当前订单状态值,如果为空就初始化为1 + // Take the current order status value, initialize to 1 if it is empty const orderState = getState('orderState'); if (!state) { return dispatch('fillOrderState', 1); } - // 如果改变的订单值和原来状态相同或异常值就不更新了 + // Not update if the changed order value is the same as the original state or is the abnormal value else if (state === orderState || state < 1 || state > 3) { return; } - // 符合修改条件后,发起异步请求 + // Initiate an asynchronous request after the modification condition is met axios.post('/api/orderState', {state}) .then(res => { - // 状态码正确,修改store中的订单值 + // The status code is correct, modify the order value in the store if (res.status === 200) { dispatch('fillOrderState', state); } @@ -65,18 +65,18 @@ store.addAction('changeOrderState', (state, {getState, dispatch}) => { console.log(error); }); }); -// 同步orderState值 +// Synchronize orderState value store.addAction('fillOrderState', state => updateBuilder().set('orderState', state)); -// 给订单状态一个初始值 +// Give the order status an initial value store.dispatch('fillOrderState', 1); ``` -#### 初始值 -看到上面的`store.dispatch('fillOrderState', 1)`了吗? -这是为了给订单状态一个初始值。 -为什么会这样做? +#### Initial value +See the `store.dispatch('fillOrderState', 1)` above? +This is to give the order status an initial value. +Why we do it in this way? -也许你会想到san-store手动实例化store时中提供了initData属性: +Maybe you will think of the `initData` property provided by san-store when manually instantiating the store: ```js let myStore = new Store({ @@ -94,50 +94,50 @@ let myStore = new Store({ }) ``` -这确实是个很不错的初始办法。 -可惜的是,`connect.san`方法只能连接san-store默认提供的store,手动实例化的store无法使用`connect.san`方法。 +This is indeed a very good initial approach. +Unfortunately, the `connect.san` method can only be connected to the store provided by san-store by default. The manually instantiated store cannot use the `connect.san` method. -而且erik和灰大在设计之初认为: +And at the beginning of the design, Erik and Gray think: -1. store应该只存在一个(按常理出牌),如果提供连接其他store的方法,可能会在业务中被玩坏 -2. 大部分初始值都是异步获取的,仍然需要dispatch action获得 +1. Store should only have one (by common sense), if you provide a way to connect to other stores, unpredictable errors may occur in the business. +2. Most of the initial values are obtained asynchronously and still require `dispatch action` to get -所以当初并没有提供手动指定store进行连接的能力。 -好消息是,我们会在近期开放这个功能,敬请期待。 +So San didn't provide the ability to manually specify the store to connect. +The good news is that we will be opening this feature in the near future, so stay tuned. -#### 入口文件引入store.js -别忘了在main.js中添加store.js。 +#### Import store.js in the entry file. +Don't forget to add `store.js` to `main.js`. ```js -// 入口文件 main.js +// entry file main.js import './store'; ``` -#### 修改频道 +#### Modify channel -为不同频道增加显示以及修改订单状态。 +Add displays to different channels and method to modify order status. -首先修改Home频道。 +First, modify the Home channel. ```js -// 修改Home.js +// modify Home.js import {connect} from 'san-store'; import san from 'san'; const Home = san.defineComponent({ template: `
目前状态:{{orderState}}
- +current status: {{orderState}}
+