Mahiru's Humble Abode       博  客   时 间 线   归  档   关 于 与 友 链



Redux初体验
Published on Sat Dec 18 2021 12:00:01 GMT+0000

Redux初体验

概念图

redux

1、创建Store(类似于全局变量存储仓库)

1
2
3
4
5
6
7
import {createStore} from "redux";
import reducer from "./reducer";

//window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 是为了在DevTools调试,可以不加
const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

export default store;

2、创建Reducer(相当于全局变量管理器)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const defaultStore = {
inputValue:'Write something',
list:[
'搞114514',
'坐下北泽JR'
]
};

export default (state = defaultStore,action)=>{
console.log(state);
console.log(action);
if(action.type === 'value/changeInput'){
let newState = JSON.parse(JSON.stringify(state));
newState.inputValue = action.payload;
return newState;
}
return state;
}

3、在组件里调用仓库内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import './App.css';
import store from "./store";
import {useState} from "react";
import { Input } from 'antd';
import 'antd/dist/antd.css';

function App() {
//初始化HOOK:取出store里的state
const [appData,setAppData] = useState(store.getState());
//当store变动时,调用回调函数(这里是setAppData)
store.subscribe(()=>{setAppData(store.getState())});
let list = appData.list;
let inputValue = appData.inputValue;
let page = [];
console.log(store.getState())
for (let i = 0; i < list.length; i++) {
let temp = <div>{list[i]}</div>
page.push(temp);
}

const changeInputValue = (e)=>{
// 创建action
const action = {
type:'value/changeInput',
payload:e.target.value
}
// 使action生效(也就是传给reducer,判断后更新store中的state)
store.dispatch(action);
}

return (
<div>
<Input placeholder={"Write Something"} onChange={changeInputValue}/>
{page}
<div>
{inputValue}
</div>
</div>

);
}

export default App;

如此一来,就实现了类似于全局变量管理的模式(你可以为每一个需要管理的全局状态创建store)

将Store和Reducer写到一起

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import {createStore} from "redux";

//初始化
const defaultStore = {
inputValue:'Write something',
list:[
'搞114514',
'坐下北泽JR'
]
};

const reducer = (state = defaultStore,action)=>{
//判断action的类型,改变state的指定属性
if(action.type === 'value/changeInput'){
let newState = JSON.parse(JSON.stringify(state));
newState.inputValue = action.payload;
return newState;
}
return state;
}

const appStore = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

export default appStore;

对应的App代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import './App.css';
import appStore from "./store/appReducer";
import {useState} from "react";
import { Input } from 'antd';
import 'antd/dist/antd.css';

function App() {
//初始化HOOK:取出store里的state
const [appData,setAppData] = useState(appStore.getState());
//当store变动时,调用回调函数(这里是setAppData)
appStore.subscribe(()=>{setAppData(appStore.getState())});
let list = appData.list;
let inputValue = appData.inputValue;
let page = [];
console.log(appStore.getState())
for (let i = 0; i < list.length; i++) {
let temp = <div>{list[i]}</div>
page.push(temp);
}

const changeInputValue = (e)=>{
// 创建action
const action = {
type:'value/changeInput',
payload:e.target.value
}
// 使action生效(也就是传给reducer,判断后更新store中的state)
appStore.dispatch(action);
}

return (
<div>
<Input placeholder={"Write Something"} onChange={changeInputValue}/>
{page}
<div>
{inputValue}
</div>
</div>

);
}

export default App;

Action Creator

添加了 Action Creator 的处理方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//初始化
const defaultStore ='Write something';

const inputValue = (state = defaultStore, action)=>{
//判断action的类型,改变state的指定属性
if(action.type === 'value/changeInput'){
let newState = JSON.parse(JSON.stringify(state));
newState = action.payload;
return newState;
}
return state;
}

export class inputValueAction{
static changeInput = (input) =>{
return {
type:'value/changeInput',
payload:input
}
}
}

export default inputValue;

将所有相关与某个要发送数据的 action creator 放到一个类中,方便调用