Reactjs 来自flux存储的数据返回null

我试图使用flux模式和react JS显示组件的一些数据。我尝试了不同的步骤来找出它为什么总是为空。在检索数据时，它只给出空页和空白页

我正在努力学习通量和反应。我遵循了本教程freecodecamp.org/news/how-to-use-flux-in-react-example/

Actions.js

export default class ActionList {
static  getPosts() {

console.log(data)
dispatcher.dispatch({
    actionTypes: actionTypes.GET_POSTS,
    posts: data["data"]
});
}
}

Store.js

const CHANGE_EVENT = "change";
let _posts = [];
class DataStore extends EventEmitter{

addChangeListener(callback) {
    this.on(CHANGE_EVENT, callback);
}

removeChangeListener(callback) {
    this.removeListener(CHANGE_EVENT, callback);
}

emitChange() {
    this.emit(CHANGE_EVENT);
}

getPosts() {
    console.log(_posts);
    return _posts;
}
}
let dataStore = new DataStore();

 Dispatcher.register((action) => {
 switch (action.ActionTypes) {
       
    case ActionTypes.GET_POSTS:
        _posts = action.posts;
        dataStore.emitChange();
        break;
    default:
   }
   });

   export default dataStore;

组件.jsx

export  const SongList = () => {
const [products, setPosts] = useState(DataStore.getPosts());


useEffect(() => {
  DataStore.addChangeListener(_onChange);
  if(DataStore.getPosts().length === 0 ) ActionList.getPosts();
  return() => DataStore.removeChangeListener(_onChange);
},[]);

function _onChange() {
    setPosts(DataStore.getPosts());
}
return (
    <div>
        <h3>Data</h3>
        {console.log(DataStore.getPosts())}
    {products.map(product=>(
        <div key={product.id}>
    <h1>{product.FName}</h1>
    <h2>{product.Lname}</h2>
    </div>
    ))} 
       </div>
    )
    }

export const SongList=（）=>{
const[products，setPosts]=useState（DataStore.getPosts（））；
useffect（（）=>{
DataStore.addChangeListener（_onChange）；
if（DataStore.getPosts（）.length==0）ActionList.getPosts（）；
return（）=>DataStore.removeChangeListener（_onChange）；
},[]);
函数_onChange（）{
setPosts（DataStore.getPosts（））；
}
返回(
资料
{console.log（DataStore.getPosts（））}
{products.map（product=>(
{product.FName}
{product.Lname}
))} 
)
}