您好,登录后才能下订单哦!
这篇“ReactNative状态管理redux使用的方法是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“ReactNative状态管理redux使用的方法是什么”文章吧。
安装 Node.js 和 create-react-app 脚手架,用于快速创建 React 应用程序
npx create-react-app playpage_ts -template typescript
安装 React 和 Redux 关联库 redux 和 react-redux
npm install @reduxjs/toolkit react-redux
这里我们假设 TODO 就是一个文本
export type TODO = { text: string } //1.定义状态数据 export type State = { todos: TODO[] }
定义行为 action,比如添加、删除:
//2.定义行为 //action export const ADD_TODO = 'ADD_TODO'; export const DELETE_TODO = 'DELETE_TODO'; //action creator const ACTION_CREATOR_ADD_TODO = (text:string) => { return {type: ADD_TODO, payload: text} }; const ACTION_CREATOR_DELETE_TODO = (text:string) => { return {type: DELETE_TODO, payload: text} }; //分发数据变更操作,接收 store.dispatch export function DISPATCH_ADD_TODO(dispatch: any) { return (text: string) => { dispatch(ACTION_CREATOR_ADD_TODO(text)) } } export function DISPATCH_DELETE_TODO(dispatch: any) { return (text: string) => { dispatch(ACTION_CREATOR_DELETE_TODO(text)) } }
上面的代码里,首先定义了行为类型( action type):ADD_TODO 和 DELETE_TODO,它们用于唯一标识一个状态改变行为。
然后创建了两个 action creator :ACTION_CREATOR_ADD_TODO 和 ACTION_CREATOR_DELETE_TODO,它们用于创建符合 reducer 约定的 action 对象,其中 type 标识行为类型,payload 表示传递的数据。
最后创建了两个函数:DISPATCH_ADD_TODO 和 DISPATCH_DELETE_TODO,它们用于分发数据变更操作,简化后续 connect 里的代码。
import { State, TODO } from "./model"; import { ADD_TODO, DELETE_TODO } from "./todoActions"; const initState : State = { todos: [ { text: "clean room" } ] }; //3.创建行为处理函数 const todoReducer = (state: State = initState, action: any): State => { switch(action.type) { case ADD_TODO: //返回一个新的状态树 return { todos: [...state.todos, {text: action.payload}] }; case DELETE_TODO: console.log('todoReducer delete >>>' + action.payload) const todos = state.todos.filter((item: TODO, index: number)=> { return item.text != action.payload }); return { todos } default: console.log('return default>>>' + JSON.stringify(state)) return state; } }; export default todoReducer;
todoReducer 的作用是根据行为,返回新的状态。
参数是先前的状态 state 和要执行的行为 action,根据 action type 行为类型,返回不同的数据。
需要注意的是,reducer 中不能修改老数据,只能新建一个数据。
创建一个 store,参数就是上面创建的行为处理函数:
import { createStore } from 'redux'; import todoReducer from './reducers'; //4.创建 store,提供全局的状态和行为处理 const store = createStore( todoReducer ); //监听数据变化 store.subscribe( () => { console.log("store changed >>>" + JSON.stringify(store.getState())) }) export default store;
import { createStore } from 'redux'; import rootReducer from './reducers'; const store = createStore( rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); export default store;
分发给子元素:
import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { Provider } from 'react-redux'; import ReduxTodoApp from './ReduxTodoApp'; import store from './redux/store'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); //5.分发给子元素 root.render( <Provider store={store}> <ReduxTodoApp/> </Provider> );
上面的代码中,我们使用使用 react-redux 的 Provider 包围了 App 组件,这样整个 App 组件都可以获取到 Store 中的状态和行为处理函数。
ReduxTodoApp 是下一步要创建的 UI 组件
import {useState} from "react"; import { connect } from "react-redux"; import { State, TODO } from "./redux/model"; import {DISPATCH_ADD_TODO, DISPATCH_DELETE_TODO } from "./redux/todoActions"; //6.数据和 action 函数需要通过 prop 访问 function ReduxTodoApp (prop: {todos: TODO[], addTodo: any, deleteTodo: any}) { const {todos, addTodo, deleteTodo} = prop; const [text, setText] = useState(''); const handleInput = (e: any) => { setText(e.target.value) } const handleAddTodo = () => { addTodo(text) setText('') } const handleDeleteTodo = (text: string) => { deleteTodo(text) } return ( <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> <h2>This Is Redux TODO App.</h2> <ul> {todos.map((todo: TODO, index: any) => { return ( <li key={index}> <span>{todo.text}</span> <button style={{marginLeft: '12px'}} onClick={() => handleDeleteTodo(todo.text)}>finish</button> </li> ) })} </ul> <div style={{display: 'flex', flexDirection: 'row'}}> <input value={text} onChange={handleInput}/> <button onClick={handleAddTodo}>Add Todo</button> </div> </div> ) } //外部的数据(即state对象)如何转换为 UI 组件的参数 //mapStateToProps会订阅 Store,每当state更新的时候,就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件的重新渲染。 const mapStateToProps = (state: State) => { console.log('mapStateToProps >>> ' + JSON.stringify(state)) //返回的是一个对象,需要根据属性名访问 return { todos: state.todos } } //建立 UI 组件的参数到store.dispatch方法的映射 //定义了哪些用户的操作应该当作 Action,传给 Store const mapDispatchToProps = (dispatch: any, ownProps: any) => { //返回一个 Prop 对象 return { addTodo: DISPATCH_ADD_TODO(dispatch), deleteTodo: DISPATCH_DELETE_TODO(dispatch) } }; //5.组件接收数据和分发行为 export default connect(mapStateToProps, mapDispatchToProps) (ReduxTodoApp);
上面的代码中,使用 connect 包装了 UI 组件。
connect 的第一个参数 mapStateToProps 用于返回当前 UI 组件需要的数据,这里我们获取到 Store 中的 todos 列表。
第二个参数 mapDispatchToProps 用于返回当前 UI 组件需要向外分发的状态操作行为,这里我们需要分发两个行为:添加 todo 和删除 todo,通过调用第二步中创建的 DISPATCH_ADD_TODO 和 DISPATCH_DELETE_TODO 实现。
正如名称所示,mapStateToProps 和 mapDispatchToProps,最终都会向 Props 里添加成员。
这样,我们的 UI 组件的 props 就会包含 mapStateToProps 中返回的状态与 mapDispatchToProps 中的函数,也就是这样:
{ todos: TODO[], addTodo: any, deleteTodo: any }
注意名称需要一致。
然后我们就可以在 UI 组件中通过 prop.todos 获取数据,通过 prop.addTodo 或者 prop.deleteTodo 通知修改数据。
总结一下,通过最原始的 redux 管理状态分这几步:
定义数据结构类型,也就是前面的 State
定义要进行的数据修改行为 (action type),也就是前面的 ADD_TODO 和 DELETE_TODO
然后创建 action creator,创建 reducer 里需要的 action 对象
然后创建调用 store.dispatch 的函数,简化 mapDispatchToProps 的代码
有了行为后,然后就是处理行为,也就是 reducer
在其中根据 action type,返回不同的状态
有了 reducer 后,store 就齐全了,可以通过 createStore 创建一个全局唯一的 store
通过 react-redux 的 Provider 包裹整个 app 组件,把 store 分发给所有组件
最重要的一步:在 UI 组件里获取数据和分发行为
使用 react-redux 的 connect 包裹 UI 组件
connect 的第一个参数返回一个对象,在其中获取 UI 组件里需要的数据
第二个参数返回一个对象,其中包括要向外分发的行为
在 UI 组件里通过 props.xxx 的方式获取数据和分发行为
步骤有些繁琐,但重要的是,行为和行为处理都拆分开,及时业务变得复杂,后续拓展也比较轻松。
如果要分析某个状态修改操作,在 reducer 里增加日志即可定位到,这就是 redux 宣称的优势:“可追溯”。
以上就是关于“ReactNative状态管理redux使用的方法是什么”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。