README

Redux - 状态管理器

<?php

use Redux\Redux;


# Action
$incrementAction = Redux::createAction("INCREMENT");


# Reducer
$counterReducer = Redux::createReducer(0, [
    $incrementAction()["type"] => fn($state, $action) => $state + 1
]);


# Store
$store = Redux::createStore($counterReducer);

echo $store->getState(); # 0

$store->dispatch($incrementAction());

echo $store->getState(); # 1

安装

使用 Composer

composer require arefshojaei/redux

使用 Git

git clone https://github.com/ArefShojaei/Redux.git

指南

Store : 状态或容器作为全局数据

# Usage
Redux::createStore($reducer, $middlewares);

Action : 执行某事的触发事件

# Usage
Redux::createAction("ACTION");

Reducer : 通过 Action 更新状态的函数

# Usage
Redux::createReducer($initState, $reducers);

Middleware : 在 Reducer 之前调用的函数

# Usage
Redux::createMiddleware($callback);

应用 Middlewares : 获取所有 Middlewares 并在 Store 中应用

# Usage
Redux::applyMiddlewares(...$middlewares);

合并 Reducers : 合并所有 Reducers 以获取键值对数组

# Usage
Redux::combineReducers($reducers);

计数器应用的示例

创建触发事件的 Action

• 增加计数
• 减少计数
• 重置计数

$incrementAction = Redux::createAction("INCREMENT");

$decrementAction = Redux::createAction("DECREMENT");

$resetAction = Redux::createAction("RESET");

创建 Reducer 更新状态

• 增加计数
• 减少计数
• 重置计数

$initState = 0;

$counterReducer = Redux::createReducer($initState, [
    $incrementAction()["type"] => fn($state, $action) => $state + 1,
    $decrementAction()["type"] => fn($state, $action) => $state - 1,
    $resetAction()["type"] => fn($state, $action) => $state - $state,
]);

注意 : 当调用 Action 时，你应该知道如何获取一个键值对的数组，如下所示

# Action
$incrementAction = Redux::createAction("INCREMENT");




# call to get this details
$incrementAction()

[
    "type" => "INCREMENT",
    "payload" => null
]

# call to pass argument as payload data to get this details
$incrementAction(["status" => "OK"])

[
    "type" => "INCREMENT",
    "payload" => [
        "status" => "OK"
    ]
]

通过 Reducer 创建 Store

$store = Redux::createStore($counterReducer);

在项目中使用 Store

# Get State from the Store
echo $store->getState(); # 0


# Dispatch Action
$store->dispatch($incrementAction()); # 1
$store->dispatch($incrementAction()); # 2


# Get new State from the Store
echo $store->getState(); # 2

订阅 Store 作为日志记录状态值变化

# Subscriber
$unSubscribe = $store->subscribe(function(\Redux\Contracts\Interfaces\Store $store) {
    echo "[Store] updated!" . PHP_EOL;
    echo "[State] value: " . $store->getState();
});



# Get State from the Store
echo $store->getState() . PHP_EOL; # 0


# Dispatch Action
$store->dispatch($incrementAction()); # 1
$store->dispatch($incrementAction()); # 2

$unSubscribe(); # Stop the Subscriber to log

$store->dispatch($incrementAction()); # 3


# Get new State from the Store
echo $store->getState(); # 3

创建记录 Store 和 Action 的 Middleware

# Logger
$logger = Redux::createMiddleware(function($store, $action, $next) {
    echo "- Logger Middleware -";
    echo "[State] value: " . $store->getState();
    echo "[Action] type: " . $action['type'];

    
    # Call next Middleware or Reducer
    $next($action);
});




# Apply Middlewares
$middlewares = Redux::applyMiddleawres($logger);


# Pass Middlewares as Argument to the Store that has defined yet
$store = Redux::createStore($counterReducer, $middlewares);

注意: Middleware 与订阅者

Middleware 可以 记录 Store、Action 并通过 Action 调用 Reducer 的下一个 Middleware！

订阅者可以像 日志记录器 一样从 Store 获取 变化的状态值！

示例视图

<?php

# Put autoload file path
require_once "vendor/autoload.php";


use Redux\Redux;


# Action
$incrementAction = Redux::createAction("INCREMENT");

$decrementAction = Redux::createAction("DECREMENT");

$resetAction = Redux::createAction("RESET");



# Reducer
$initState = 0;

$counterReducer = Redux::createReducer($initState, [
    $incrementAction()["type"] => fn($state, $action) => $state + 1,
    $decrementAction()["type"] => fn($state, $action) => $state - 1,
    $resetAction()["type"] => fn($state, $action) => $state - $state,
]);



# Middleware
$logger = Redux::createMiddleware(function($store, $action, $next) {
    echo "- Logger Middleware -";
    echo "[State] value: " . $store->getState();
    echo "[Action] type: " . $action['type'];

    
    # Call next Middleware or Reducer
    $next($action);
});

$middlewares = Redux::applyMiddlewares($logger);



# Store
$store = Redux::createStore($counterReducer, $middlewares);








# ---------- Usage ----------
# Subscriber
$unSubscribe = $store->subscribe(function(\Redux\Contracts\Interfaces\Store $store) {
    echo "[Store] updated!" . PHP_EOL;
    echo "[State] value: " . $store->getState();
});



# Get State from the Store
echo $store->getState() . PHP_EOL; # 0


# Dispatch Action
$store->dispatch($incrementAction()); # 1
$store->dispatch($incrementAction()); # 2

$unSubscribe(); # Stop the Subscriber to log

$store->dispatch($incrementAction()); # 3


# Get new State from the Store
echo $store->getState(); # 3