redux的基础学习使用

引言：

        状态管理工具对于工作非常的有用，我们redux主要存在三个对象，action，store，reducer,store就是一家店，这里有你想要的最新数据，action就是你要改变的类型，以及数值，reducer就是帮你做事的店里师傅，那么接下来咱们专业学习一下redux。

概念：

- Redux 是一个状态管理库，它可以帮助你管理应用程序中的所有状态（如 UI、网络请求、授权状态等）。
- Redux 采用了单向数据流的架构，意味着状态更新是通过分发 action 给 reducer 来实现的，这个 reducer 会根据 action 返回一份新的状态。
- Redux 的主要思想是“Store 保存应用的完整状态，Action 是把数据从应用（即 UI 层）传到 Store 的有效载荷，Reducer 定义了应用状态的变化如何响应 Action 并发送到 Store”。

 使用redux

引redux，用store，action，reducer，暴漏，使用三者

引redux 

npm install redux

 用store

import { createStore } from 'redux';
import rootReducer from './reducers';
 
const store = createStore(rootReducer);

在这个例子中，我们首先导入Redux库的`createStore`函数，然后导入我们的根Reducer函数`rootReducer`。接着，我们使用`createStore`函数来创建Redux Store对象，并将`rootReducer`作为参数传递。

现在，我们已经创建了一个基本的Redux Store对象，但是它还没有与我们的React应用程序连接起来。为了将Redux Store与React应用程序连接起来，您需要使用Redux提供的一个称为`Provider`的React组件，它允许您将Redux Store作为prop传递给React组件树中的所有组件。例如：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
 
import App from './App';
 
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

在这个例子中，我们使用`Provider`组件将Redux Store传递给React应用程序，并将`App`组件作为其子元素。现在，我们的Redux Store可以在整个应用程序中使用，并与React组件进行交互了。

创建 action

在Redux中，Action必须是一个带有`type`属性的纯对象，该属性指定Action的类型。例如：

import { NI_HAO_TYPE} from '../constants/sys-info'
export const nihaoType = type => ({ type: NI_HAO_TYPE, data: type })

export const NI_HAO_TYPE = 'nihao'

创建reducer

import { NI_HAO_TYPE } from '../constants/sys-info'
 
export default function nihao(state = 0,action){ 
    console.log('33333333333')
    const {type,data} = action
    console.log('type',type)
    if (type === NI_HAO_TYPE){
        console.log('state',state)
        return state + data
    }
}

组件使用

引入store，action

import store from '....'

import action_name from '....'

使用store，action

store.getState()   获取当前的值

store.dispatch(action_name(5))  传入新state，更改state

后续增加中。。。